Refs ReactJS

refUtilisées pour renvoyer la référence à l'élément concerné.RéfsDans la plupart des cas, il est préférable d'éviter leur utilisation, mais elles peuvent être très utiles lorsque nous avons besoin de mesures DOM ou d'ajouter des méthodes au composant.

Utilisation des Réfs

L'exemple suivant montre comment utiliser une référence pour effacer le champ d'entrée.ClearInputUtilisation de la fonctionref = "myInput"Recherche de l'élément, réinitialisation de l'état et ajout du focus après clic 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 appuyé, l'entrée sera effacée et le focus sera rétabli.