不受控制的组件

不受控制的组件是没有 value 属性的输入。与受控组件相反，应用程序负责保持组件状态和输入值同步。

class Form extends React.Component {
  constructor(props) {
    super(props);
    
    this.onChange = this.onChange.bind(this);
    
    this.state = {
      name: 'John'
    };
  }
  
  onChange(e) {
    this.setState({
      name: e.target.value
    });
  }
  
  render() {
    return (
      <div>
        <label for='name-input'>Name: </label>
        <input
          id='name-input'
          onChange={this.onChange}
          defaultValue={this.state.name} />
      </div>
    )
  }
}

这里，组件的状态通过 onChange 事件处理程序更新，就像受控组件一样。但是，提供 defaultValue 属性而不是 value 属性。这确定了第一次渲染期间输入的初始值。组件状态的任何后续更改都不会自动反映在输入值中; 如果需要，则应使用受控组件。