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

6 votes358 views2 answers
React native spinkit
Javascript React
0 vote314 views3 answers
Set bg image in react
Javascript React
1 vote331 views3 answers
Add react to existing project
Javascript React
9 votes356 views6 answers
React Component
Javascript React
0 vote351 views1 answer
React hero slider
Javascript React
1 vote418 views1 answer
How to add two elements in one path in react router v6
Javascript React
1 vote341 views1 answer
Module '"../../../node_modules/react-native"' has no exported member 'View'
Javascript React
0 vote335 views2 answers
Textarea react native
Javascript React
0 vote370 views1 answer
Make a component update every second react
Javascript React
0 vote380 views2 answers
Como arreglar el error de Linking.openUrl no funciona react native
Javascript React