PL
React - jak pobrać referencję do elementu input
0
points
W tym artykule chcielibyśmy pokazać, jak uzyskać referencję do elementu wejściowego w Reakcie.
W poniższym przykładzie tworzymy referencję za pomocą hooka React.useRef, następnie przypisujemy ją do właściwości ref elementu input.
Teraz, aby uzyskać dostęp do referencji elementu DOM, możemy użyć właściwości inputRef.current, a dostęp do wartości jaka się tam aktualnie znajduje uzyskamy dzięki inputRef.current.value.
// ONLINE-RUNNER:browser;
// Uwaga: Odkomentuj poniższe linijki podczas pracy z kompilatorem JSX:
// import React from 'react';
// import ReactDOM from 'react-dom';
const App = () => {
const inputRef = React.useRef();
return (
<div>
<input defaultValue="Przykładowy tekst..." ref={inputRef}></input>
<button onClick={() => { console.log(inputRef.current); }}>Sprawdź referencję</button>
<button onClick={() => { console.log(inputRef.current.value); }}>Sprawdź wartość</button>
</div>
);
}
const root = document.querySelector('#root');
ReactDOM.render(<App />, root);