how to use ref in class component code example

Example 1: react.createref()

class CustomTextInput extends React.Component {
  constructor(props) {
    super(props);
    // create a ref to store the textInput DOM element
    this.textInput = React.createRef();    this.focusTextInput = this.focusTextInput.bind(this);
  }

  focusTextInput() {
    // Explicitly focus the text input using the raw DOM API
    // Note: we're accessing "current" to get the DOM node
    this.textInput.current.focus();  }

  render() {
    // tell React that we want to associate the  ref
    // with the `textInput` that we created in the constructor
    return (
      

                
      
    );
  }
}

Example 2: when to use react ref

WHEN TO USE REACT'S REF ATTRIBUTE?
But it is not always a good idea to use the ref attribute. The general rule of thumb is to avoid it. The official React documentation mentions three occasions where you can use it because you have no other choice.

Managing focus, text selection, or media playback.
Integrating with third-party DOM libraries.
Triggering imperative animations.

Example 3: cre&atRefs react js

const node = this.myRef.current;

Example 4: use ref in component reactjs

function MyFunctionComponent() {  return ;
}

class Parent extends React.Component {
  constructor(props) {
    super(props);
    this.textInput = React.createRef();  }
  render() {
    // Ça ne fonctionnera pas !
    return (
          );
  }
}

Example 5: use ref in component reactjs

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

Example 6: use ref in component reactjs

class CustomTextInput extends React.Component {
  constructor(props) {
    super(props);
    // Crée une référence pour stocker l’élément DOM textInput
    this.textInput = React.createRef();    this.focusTextInput = this.focusTextInput.bind(this);
  }

  focusTextInput() {
    // Donne explicitement le focus au champ texte en utilisant l’API DOM native.
    // Remarque : nous utilisons `current` pour cibler le nœud DOM
    this.textInput.current.focus();  }

  render() {
    // Dit à React qu’on veut associer la ref `textInput` créée
    // dans le constructeur avec le ``.
    return (
      

                
      
    );
  }
}