react 表单（受控组件和非受控组件）

我们知道表单元素与其他的普通DOM元素来说是不一样的，它们保存了自己的一些状态。

我们主要说的就是表单元素中的受控组件和非受控组件。

受控组件就是这个组件的状态是我们（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('A name was submitted: ' + this.state.value);
    event.preventDefault();
  }

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

这个表单中的input的value是受到组件的state来控制的，并且元素的onChange也是受到组件的控制函数控制的，并且最终表单的提交也是收到组件的提交处理函数控制的。也就是说，组件任何状态的改变，都是收到一个相关的处理函数控制的。那么我们想想这种受控组件有什么优点和缺点，我们稍微想一下就是受控组件的话，优点就是一切都是可以控制的，缺点很明显，就是写起来比较麻烦，不过这也不算是缺点吧，毕竟要功能强大，肯定就需要自己定制呀。

非受控组件

在大多数情况下，我们推荐使用 受控组件 来实现表单。 在受控组件中，表单数据由 React 组件处理。如果让表单数据由 DOM 处理时，替代方案为使用非受控组件。

这句话大概说明了什么是非受控组件。我们看一个例子：

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

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

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

我们可以跟上面的受控组件做一个下比较，首先直观上看，我们的代码量少了一点，那么具体哪里少了呢，就是我们不需要对input的onChange事件进行函数处理，我们也没有保存input的value的state，所以这个组件的状态是由它自己保存的，我们可以在需要的时候通过ref获取到，比如在submit的时候。有时候我们需要给组件加上默认值，受控组件很容易做到，就是给state初始化的时候给一个默认值，但是非受控组件怎么弄呢？这里有一个属性叫做defaultValue我们给input传入这个属性就可以修改它的初始值了。（checkbox 和 radio 是defaultChecked）

那么我们到底该如何选择使用受控组件还是非受控组件呢？
我也不是特别明确，看了一些别人写的文章，我的理解是：当我们需要实时的控制组件的状态（包括样式，值等），我们就应该使用受控组件，如果我们只是需要在提交的时候获取一下值什么的，我们可以选择使用非受控组件。

还有一个特殊的东西，就是<input type='file'>，这种组件只能是非受控组件，因为它的value属性是只读的，只能够受用户控制，我们没法主动去控制。