受控组件

受控表单组件使用 value 属性定义。受控输入的值由 React 管理，用户输入不会对呈现的输入产生任何直接影响。相反，对 value 属性的更改需要反映这种变化。

class Form extends React.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 事件处理程序使用用户的输入更新组件的状态。

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