Ref hook in react

UseRef

/*
	A common use case is to access a child imperatively: 
*/

function TextInputWithFocusButton() {
  const inputEl = useRef(null);
  const onButtonClick = () => {
    // `current` points to the mounted text input element
    inputEl.current.focus();
  };
  return (
    <>
      <input ref={inputEl} type="text" />
      <button onClick={onButtonClick}>Focus the input</button>
    </>
  );
}

Source: reactjs.org

Ref hook in react

function TextInputWithFocusButton() {
  const inputEl = useRef(null);
  const onButtonClick = () => {
    // `current` points to the mounted text input element
    inputEl.current.focus();
  };
  return (
    <>
      <input ref={inputEl} type="text" />
      <button onClick={onButtonClick}>Focus the input</button>
    </>
  );
}

Source: reactjs.org

Similar codes

0 vote157 views1 answer
Get status bar height react native
Javascript React
0 vote160 views1 answer
Get position of element in react
Javascript React
0 vote305 views1 answer
Change theme in react-toastify
Javascript React
0 vote182 views1 answer
React native app slow lagging image
Javascript React
160 votes406 views6 answers
React install
Javascript React
3 votes182 views1 answer
Remove header from certain pages react navigation
Javascript React
0 vote158 views2 answers
Which one is better arrow functions or using bind in react?
Javascript React
7 votes155 views1 answer
React native touchableopacity disable
Javascript React
0 vote180 views1 answer
Declaring variable react hooks
Javascript React
2 votes169 views2 answers
Run react native app in production mode
Javascript React