PL
React - jak ustawić kurosr na elemencie input po renderowaniu
0
points
W tym artykule chcielibyśmy pokazać, jak w Reakcie ustawić kursor na elemencie input bezpośrednio po wyrenderowaniu komponentu.
W poniższym przykładzie używamy dwóch hooków:
useRefktóry przechowuje referencję do elementuinput,useEffect- metoda.focus()jest wywoływana, gdy komponentAppzostanie wyrenderowany.
Uruchamialny przykład:
// ONLINE-RUNNER:browser;
// Uwaga: Odkomentuj poniższe linijki podczas pracy z kompilatorem JSX:
// import React from 'react';
const App = () => {
const inputRef = React.useRef();
React.useEffect(() => {
if (inputRef.current) {
inputRef.current.focus();
}
}, []);
return (
<div>
<label>Search: </label>
<input ref={inputRef} />
</div>
);
}
const root = document.querySelector('#root');
ReactDOM.render(<App />, root );