use ref in component reactjs

1class AutoFocusTextInput extends React.Component {
2  constructor(props) {
3    super(props);
4    this.textInput = React.createRef();  }
5
6  componentDidMount() {
7    this.textInput.current.focusTextInput();  }
8
9  render() {
10    return (
11      <CustomTextInput ref={this.textInput} />    );
12  }
13}

1function MyFunctionComponent() {  return <input />;
2}
3
4class Parent extends React.Component {
5  constructor(props) {
6    super(props);
7    this.textInput = React.createRef();  }
8  render() {
9    // Ça ne fonctionnera pas !
10    return (
11      <MyFunctionComponent ref={this.textInput} />    );
12  }
13}

1class MyComponent extends React.Component {
2  constructor(props) {
3    super(props);
4    this.myRef = React.createRef();  }
5  render() {
6    return <div ref={this.myRef} />;  }
7}

1function CustomTextInput(props) {
2  // textInput doit être déclaré ici pour que la ref puisse s’y référer  const textInput = useRef(null);
3  function handleClick() {
4    textInput.current.focus();  }
5
6  return (
7    <div>
8      <input
9        type="text"
10        ref={textInput} />      <input
11        type="button"
12        value="Donner le focus au champ texte"
13        onClick={handleClick}
14      />
15    </div>
16  );
17}

1class CustomTextInput extends React.Component {
2  constructor(props) {
3    super(props);
4
5    this.textInput = null;
6    this.setTextInputRef = element => {      this.textInput = element;    };
7    this.focusTextInput = () => {      // Donne le focus au champ texte en utilisant l’API DOM native.      if (this.textInput) this.textInput.focus();    };  }
8
9  componentDidMount() {
10    // Focus automatique sur le champ au montage
11    this.focusTextInput();  }
12
13  render() {
14    // Utilise la fonction de rappel `ref` pour stocker une référence à l’élément
15    // DOM du champ texte dans une propriété d’instance (ex. this.textInput)
16    return (
17      <div>
18        <input
19          type="text"
20          ref={this.setTextInputRef}        />
21        <input
22          type="button"
23          value="Donner le focus au champ texte"
24          onClick={this.focusTextInput}        />
25      </div>
26    );
27  }
28}

1class CustomTextInput extends React.Component {  // ...
2}

1function CustomTextInput(props) {
2  return (
3    <div>
4      <input ref={props.inputRef} />    </div>
5  );
6}
7
8class Parent extends React.Component {
9  render() {
10    return (
11      <CustomTextInput
12        inputRef={el => this.inputElement = el}      />
13    );
14  }
15}