【译】高级指南-不受控组件.md

title	date	version
高级指南-不受控组件	2017-04-28 03:47:03 -0700	15.5.0

不受控组件

在很多时候，我们推荐使用 受控组件 来实现表单。在受控组件中，React组件会处理表单数据。 反方向则是不受控组件，由DOM自身来处理表单数据。

您可以 使用 ref 来从DOM上获取表单数据，而不是为每个状态更新编写事件处理器，这就是不受控组件。

例如，在不受控组件中接收单个name值：

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>
    );
  }
}

Try it on CodePen.

由于不受控组件将数据来源保存在DOM中，因此使用不受控组件与非React程序集成时会更为容易。如果你想更快速或变更，这样也能稍微减少一些代码。否则，您应该使用受控组件。

如果你仍然不清楚你应该为特定场景选择哪种类型的组件，你可以在 受控组件 VS. 不受控组件 找到帮助。

默认值

在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> 和 <textarea> 中使用 defaultValue。