ReactJS-Refs

refVerwendet, um zur Referenz des Elements zurückzukehren.RefsIn den meisten Fällen sollten sie vermieden werden, aber sie können nützlich sein, wenn wir DOM-Messungen durchführen oder Methoden in ein Komponent hinzufügen müssen.

Verwendung von Refs

Der folgende Beispiel zeigt, wie man die Referenz verwendet, um das Eingabefeld zu bereinigen.ClearInputFunktionserstellungref = "myInput"Suchen Sie das Element, setzen Sie den Zustand zurück und fügen Sie es nach dem Klicken auf die Schaltfläche eine Fokus hinzu.

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'));

Wenn Sie auf die Schaltfläche klicken, wird der Eingang gelöscht und der Fokus wird entfernt.