引用组件:refs
当我们需要访问真正的浏览器本地DOM元素的时候,可以利用Ref属性给子组件命名,然后利用this.refs引用组件,再调用getDOMNode()方法获取DOM元素。
var App = React.createClass({
getInitialState: function() {
return {userInput: ''};
},
handleChange: function(e) {
this.setState({userInput: e.target.value});
},
clearAndFocusInput: function() {
this.setState({userInput: ''}, function() {
this.refs.theInput.getDOMNode().focus();
});
},
render: function() {
return (
<div>
<div onClick={this.clearAndFocusInput}>
Click to Focus and Reset
</div>
<input
ref="theInput"
value={this.state.userInput}
onChange={this.handleChange}
/>
</div>
);
}
});
另外需要说明的是用户在表单填入的内容,属于用户跟组件的互动,所以不能用 this.props读取。本例中<input>文本输入框中的值,不能用this.props.value读取,而是要定义一个onChange事件的回调函数,通过event.target.value读取用户输入的值。textarea 元素、select元素、radio元素都属于这种情况。