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

4 votes232 views1 answer
How to empty form after submit in react
Javascript React
0 vote241 views3 answers
React date format
Javascript React
0 vote239 views1 answer
TextField input font color React Material UI
Javascript React
0 vote267 views1 answer
React buffer to image
Javascript React
0 vote235 views1 answer
Toggle boolean state react
Javascript React
0 vote230 views3 answers
React native navigation change header title
Javascript React
0 vote248 views1 answer
React-native-checkbox in a loop
Javascript React
0 vote236 views1 answer
React.createElement pass props
Javascript React
0 vote231 views1 answer
Ts(2749) react testing library
Javascript React
5 votes247 views4 answers
How to use useref hook in react
Javascript React