此文章是翻译Uncontrolled Components这篇React（版本v16.2.0）官方文档。

Uncontrolled Components

在大多数情况下，我们建议使用可控的组件 去实现表单。在可控的组件中，表单数据被React 组件控制。在这个不可控的组件替代方案中，表单数据被DOM 自身控制。

写一个不可控的组件，而不是为每一个state 更新写一个事件处理器，你可以使用ref 从DOM 中获取表单值。

例如，下面代码是在一个不可控的组件中接受一个名字：

  1. class NameForm extends React.Component {
  2.   constructor(props) {
  3.     super(props);
  4.     this.handleSubmit = this.handleSubmit.bind(this);
  5.   }
  7.   handleSubmit(event) {
  8.     alert('A name was sumbitted:' + this.input.value);
  9.     event.preventDefault();
  10.   }
  12.   render() {
  13.     return (
  14.       <form onSubmit={this.handleSubmit} >
  15.         <label>
  16.           <input type="text" ref={(input) => this.input = input} />
  17.         </label>
  18.         <input type="submit" value="submit" />
  19.       </form>
  20.     );
  21.   }
  22. }

在CodePen 上尝试

由于不可控的组件在DOM 中保存the source of truth，在使用不可控的组件时，集成React 和non-React 代码有时是比较容易。如果你想要快速和肮脏，你可以使用少量代码。否则，你应该通常使用的是可控的组件。

如果在特殊场景下你仍然不清楚使用那种类型的组件，这篇this article on controlled versus uncontrolled inputs文章可能对你有帮助。

Default Values

在React 渲染生命周期中，在表单元素上的value 特性将会覆盖DOM 中的值。使用不可控的组件，你经常需要使用React 去配置这个初始值，但是这里随后的更新是失去控制的。为了处理这种情况，你需要配置一个defaultValue 特性而不是value。

  1.   render() {
  2.     return (
  3.       <form onSubmit={this.handleSubmit} >
  4.         <label>
  5.           <input
  6.             defaultValue="Bob"
  7.             type="text"
  8.             ref={(input) => this.input = input} />
  9.         </label>
  10.         <input type="submit" value="submit" />
  11.       </form>
  12.     );
  13.   }

同样地，<input type="checkbox"> 和<input type="radio"> 支持defaultChecked 而<select> 和<textarea> 支持defaultValue。