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事件处理程序如何使用用户的输入来更新组件的状态。

表单输入应尽可能定义为受控组件。这样可以确保组件状态和输入值始终保持同步，即使该值是通过除用户输入之外的触发器更改的。