MENU


On Function Components

You may not use a refon function components:


RESETRUNFULL
function MyFunctionComponent() {
  return <input />;}class Parent extends React.Component {
  constructor(props) {
    super(props);
    this.textInput = React.createRef();
  }
  render() {    // This will *not* work!
    return (
      <MyFunctionComponent ref={this.textInput} />
    );
  }}

However, you may use a ref in function components:


RESETRUNFULL
function CustomTextInput(props) {
   const textInput = useRef(null);
   function handleClick() {
      textInput.current.focus();
   }
   return (
      <div>
         <input type="text" ref={textInput} />
         <input type="button" value="Focus the text input" onClick={handleClick}
  />
    </div>
  );}