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.
xxxxxxxxxx1
// Uwaga: Odkomentuj poniższe linijki podczas pracy z kompilatorem JSX:2
// import React from 'react';3
// import ReactDOM from 'react-dom';4
5
const App = () => {6
const inputRef = React.useRef();7
return (8
<div>9
<input defaultValue="Przykładowy tekst..." ref={inputRef}></input>10
<button onClick={() => { console.log(inputRef.current); }}>Sprawdź referencję</button>11
<button onClick={() => { console.log(inputRef.current.value); }}>Sprawdź wartość</button>12
</div>13
);14
}15
16
const root = document.querySelector('#root');17
ReactDOM.render(<App />, root);