React 受控组件
例子
受控表单组件是通过value属性定义的。受控输入的值由React管理，用户输入不会对呈现的输入产生任何直接影响。相反，对value属性的更改需要反映此更改。
class Form extendsReact.Component{
constructor(props) {
super(props);
this.onChange= this.onChange.bind(this);
this.state= {
name: ''
};
}
onChange(e) {
this.setState({
name: e.target.value
});
}
render() {
return (
<div>
<label for='name-input'>Name: </label>
<input
id='name-input'
onChange={this.onChange}
value={this.state.name} />
</div>
)
}
}上面的示例演示了该value属性如何定义输入的当前值以及onChange事件处理程序如何使用用户的输入来更新组件的状态。
表单输入应尽可能定义为受控组件。这样可以确保组件状态和输入值始终保持同步，即使该值是通过除用户输入之外的触发器更改的。