react表单---受控组件与非受控组件

一、受控组件

在 React 中，表单元素通过组件的 state 属性来自己维护 state，并根据用户输入调用setState()来进行数据更新，使 React 的 state 成为“唯一数据源”，被 React 以这种方式控制取值的表单输入元素就叫做“受控组件”。

class NameForm extends React.Component {
  constructor(props) {
    super(props);
    this.state = {value: ''};

    this.handleChange = this.handleChange.bind(this);
    this.handleSubmit = this.handleSubmit.bind(this);
  }

  handleChange(event) {
    this.setState({value: event.target.value});
  }

  handleSubmit(event) {
    alert('提交的名字: ' + this.state.value);
    event.preventDefault();
  }

  render() {
    return (
      <form onSubmit={this.handleSubmit}>
        <label>
          名字:
          <input type="text" value={this.state.value} onChange={this.handleChange} />
        </label>
        <input type="submit" value="提交" />
      </form>
    );
  }
}

在 React 中，数据是单向流动的。从示例中，我们能看出来表单的数据源于组件的 state，并 通过 props 传入，这也称为单向数据绑定。然后，我们又通过 onChange 事件处理器将新的表单数 据写回到组件的 state，完成了双向数据绑定。这也意味着我们可以在执行最后 一步 setState 前，对表单值进行清洗和校验。

React 受控组件更新 state 的流程:
（1）可以通过在初始 state 中设置表单的默认值。
（2）每当表单的值发生变化时，调用 onChange 事件处理器。
（3）事件处理器通过合成事件对象 e 拿到改变后的状态，并更新应用的 state。
（4）setState 触发视图的重新渲染，完成表单组件值的更新。

二、非受控组件

如果一个表单组件没有 value props(单选按钮和复选框对应的是 checked prop) 时，就可以称为非受控组件。相应地，你可以使用 defaultValue 和 defaultChecked prop 来表示 组件的默认状态

元素	value属性	change回调	回调获取新值
<input type="text" />	value="string"	onChange	event.target.value
<input type="checkbox" />	checked={boolean}	onChange	event.target.checked
<input type="radio" />	checked={boolean}	onChange	event.target.checked
<textarea />	value="string"	onChange	event.target.value
<select />	value="option value"	onChange	event.target.value

class NameForm extends React.Component {
  constructor(props) {
    super(props);
    this.handleSubmit = this.handleSubmit.bind(this);
    this.input = React.createRef();
  }

  handleSubmit(event) {
    alert('A name was submitted: ' + this.input.current.value);
    event.preventDefault();
  }

  render() {
    return (
      <form onSubmit={this.handleSubmit}>
        <label>
          Name:
          <input type="text" defaultValue="Bob" ref={this.input} />
        </label>
        <input type="submit" value="Submit" />
      </form>
    );
  }
}

二、受控组件与非受控组件对比

受控组件和非受控组件各有优点，应该根据自己的具体需求选择受控还是非受控

特征	非受控	受控
一次性取值（比如提交表单时）	✅	✅
提交时验证	✅	✅
实时表单验证	❌	✅
有条件的禁用提交按钮	❌	✅
强制输入格式	❌	✅
一个数据有多个输入	❌	✅
动态输入	❌	✅