ref in functional components

Cheerful Cat answered on May 25, 2021 Popularity 10/10 Helpfulness 1/10

answer ref in functional components

related ref in functional components

ref in functional components

Comment

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} />    );
  }
}

Popularity 10/10 Helpfulness 1/10 Language javascript

Source: reactjs.org

Tags: components javascript ref

Link to this answer
Share Copy Link

Contributed on May 26 2021

Cheerful Cat

0 Answers Avg Quality 2/10

Closely Related Answers

ref in functional components

Comment

function CustomTextInput(props) {
  // textInput must be declared here so the ref can refer to it  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>
  );
}

Popularity 10/10 Helpfulness 3/10 Language javascript

Source: reactjs.org

Tags: components c

Link to this answer
Share Copy Link

Contributed on May 25 2021

Cheerful Cat

0 Answers Avg Quality 2/10

ref in functional components

Contents

More Related Answers

ref in functional components

Closely Related Answers

ref in functional components

Grepper

Documentation

Social

Legal

Contact

Oops, You will need to install Grepper and log-in to perform this action.