ref 用于返回对元素的引用.在大多数情况下应避免 Refs ,但是,当我们需要DOM测量或向组件添加方法时,它们会很有用.
以下示例显示如何使用refs清除输入字段. ClearInput 函数使用 ref ="myInput"值搜索元素,重置状态,并在单击按钮后为其添加焦点.
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;
import React from 'react'; import ReactDOM from 'react-dom'; import App from './App.jsx'; ReactDOM.render(<App/>, document.getElementById('app'));
单击按钮后,输入将被清除并聚焦.