4.Uncontrolled Components（不受控组件）

React版本：15.4.2
**翻译：xiyoki **

在大多数情况下，我们建议使用受控组件来实现表单。在受控组件中，表单数据由React组件处理。替代方法是不受控组件，其中表单数据由DOM本身处理。
编写不受控组件而不是为每个状态更新编写事件处理程序，你可以使用ref从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>
    );
  }
}

由于不受控组件在DOM中保持了真实来源，因此当使用不受控组件时，有时更容易集成React和非React代码。如果你想quick和dirty，它也可以稍微少一些代码。否则，通常应使用受控组件。
如果仍然不清楚在特定情况下应该使用哪种类型的组件，则这篇文章能为你提供帮助this article on controlled versus uncontrolled inputs 。

Default Values（默认值）

在React渲染生命周期中，表单元素上的value属性将覆盖DOM中的值。对于不受控组件，你通常希望React指定初始值，但不要控制后续更新。要处理这种情况，你可以指定defaultValue属性而不是value属性。

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

同样,<input type="checkbox">和 <input type="radio">支持 defaultChecked,<select>支持defaultValue。