# 未控制组件
在多数情况下，我们建议使用[控制组件](https://facebook.github.io/react/docs/forms.html)来实现表单。在一个控制组件中，表单数据被一个 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>
);
}
}
~~~
在 CodePen 中[打开查看](https://codepen.io/gaearon/pen/WooRWa?editors=0010)。
由于一个未控制组件在 DOM 中保留真实的源，所以当使用未控制组件有时很容易集成 React 和 非 React 的代码。如果你想快速和粗略的实现，也可以用较少的代码。否则，你应该总是使用一个控制组件。
If it's still not clear which type of component you should use for a particular situation, you might find this article on controlled versus uncontrolled inputs to be helpful.
如果仍然不清楚在某个特定方案你应该使用哪种类型的组件，可以在[这个文章中](http://goshakkk.name/controlled-vs-uncontrolled-inputs-react/)了解控制和不控制组件来获得帮助。
## 默认值
在 React 渲染生命周期中，表单元素中的 value 属性将会覆盖 DOM 中的 value。使用一个未控制组件，你常常希望 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。
