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 vote289 views1 answer
React call bind apply
Javascript React
0 vote326 views1 answer
React axios get cookie from response
Javascript React
0 vote280 views2 answers
On ddrop function react dropzone parameters
Javascript React
0 vote319 views1 answer
Horizontal tabs in react js
Javascript React
18 votes326 views2 answers
Store data in localstorage react
Javascript React
0 vote296 views1 answer
Text decoration react native
Javascript React
0 vote317 views1 answer
Install react hotjar
Javascript React
4 votes306 views1 answer
__WEBPACK_IMPORTED_MODULE_0_react___default.a.createContext is not a function
Javascript React
1 vote298 views1 answer
Cleartimeout react
Javascript React
0 vote305 views1 answer
React Hook useEffect has a missing dependency: Either include it or remove the dependency array. If changes too often, find the parent component that defines it and wrap that definition in useCallback. (react-hooks/exhaustive-deps) eslint
Javascript React