ReactJS - Réfs

le ref est utilisé pour renvoyer une référence à l'élément. Refs doivent être évités dans la plupart des cas, cependant, ils peuvent être utiles lorsque nous avons besoin de mesures DOM ou pour ajouter des méthodes aux composants.

Utilisation des références

L'exemple suivant montre comment utiliser des refs pour effacer le champ de saisie. ClearInput la fonction recherche l'élément avec ref = "myInput" value, réinitialise l'état et y ajoute le focus après avoir cliqué sur le bouton.

App.jsx

import React from 'react';
import ReactDOM from 'react-dom';

class App extends React.Component {
   constructor(props) {
      super(props);
		
      this.state = {
         data: ''
      }
      this.updateState = this.updateState.bind(this);
      this.clearInput = this.clearInput.bind(this);
   };
   updateState(e) {
      this.setState({data: e.target.value});
   }
   clearInput() {
      this.setState({data: ''});
      ReactDOM.findDOMNode(this.refs.myInput).focus();
   }
   render() {
      return (
         <div>
            <input value = {this.state.data} onChange = {this.updateState} 
               ref = "myInput"></input>
            <button onClick = {this.clearInput}>CLEAR</button>
            <h4>{this.state.data}</h4>
         </div>
      );
   }
}
export default App;

main.js

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App.jsx';

ReactDOM.render(<App/>, document.getElementById('app'));

Une fois le bouton cliqué, le input sera dégagé et ciblé.