Hooki React – useRef tutorial

Hook-a UseRef można używać na dwa sposoby. Po pierwsze, pozwala na bezpośredni dostęp do elementu DOM, dzięki czemu możemy nim manipulować. Po drugie, może zachować dowolną zmienną wartość w swojej właściwości .current, która nie zmienia się między renderowaniami.

Zmiana wartości parametru useRef nie spowoduje ponownego renderowania komponentu. Stwórzmy przykład.

Tworzymy element input i przekazujemy go do hook-a useRef. Następnie tworzymy przycisk, który po kliknięciu powoduje wyświetlenie zawartości inputu w akapicie (który przekażemy do innego hook-a useRef , aby móc się do niego łatwo odwołać). Zmiana treści na stronie nie spowoduje ponownego renderowania komponentu.

import React, { useRef } from 'react';

const HookExample = () => {    
    const inputEl = useRef(null);
    const paragraphEl = useRef(null);
    
    console.log("component has just rendered");

    return (
        <div className="App">
            <input ref={inputEl} type="text" />
            <div>
                <button onClick={() => {
                            paragraphEl.current.innerText = inputEl.current.value;
                            inputEl.current.value = "";
                        }}>Display input value</button>
                <p ref={paragraphEl} >Display input value here </p>
            </div>
        </div>
    );
}

export default HookExample;

Możemy również użyć hook-a useRef, aby zapisać w nim dowolną wartość. Jeśli ustawimy wartość useRef na 0, to po wyrenderowaniu komponentu możemy zmienić ją na przykład na string:

const HookExample = () => {    
    const paragraphEl = useRef(null);

    // useRef hook can also hold a mutable value in its .current property
    const counter = useRef(0);
   
    useEffect(() => {
        console.log(counter.current);          // 0
        counter.current = "yo!";
        console.log(counter.current);          // "yo!"
    });

    return (
        <p ref={paragraphEl} >Some text here </p>
        <button onClick={() => paragraphEl.current.innerText = counter.current}>Display counter value</button>
    );
}

export default HookExample;

Po kliknięciu przycisku „Wyświetl wartość licznika” w akapicie wyświetli się tekst „yo!”.

Zobacz DEMO  i sprawdź, jak działa hook useRef

Kod do tego postu możesz naleźć tu: https://github.com/love-coding-pl/React-Hooks-Examples/tree/Hook-5-useRef