📅  最后修改于: 2020-10-20 04:50:20             🧑  作者: Mango
ref用于返回对该元素的引用。在大多数情况下,应避免使用引用,但是,当我们需要DOM测量或向组件中添加方法时,它们可能会很有用。
以下示例显示了如何使用引用清除输入字段。 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 (
{this.state.data}
);
}
}
export default App;
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App.jsx';
ReactDOM.render( , document.getElementById('app'));
单击该按钮后,输入将被清除并聚焦。