React版本：15.4.2
**翻译：xiyoki **
在React中，HTML表单元素的工作方式与其他DOM元素的工作方式有点不同。因为表单元素自然包含一些内部状态。例如，这种采用纯HTML格式的表单接受单个名称：
<form>
<label>
Name:
<input type="text" name="name" />
</label>
<input type="submit" value="Submit" />
</form>
这个表单具有在用户提交表单时浏览到新页面的默认HTML表单行为。在React中，表单的这一行为也是会发挥作用的。但在大多数情况下，使用Javascript函数处理表单的提交并访问用户在表单中输入的数据是很方便的。实现这一点的标准方法是使用被称为“受控组件”的技术。
Controlled Components（受控组件）
在HTML中，表单元素如<input>,<textarea>以及<select>通常保持自己的状态，并根据用户输入进行更新。在React中，可变的状态通常保持在组件的state属性上，并且只能通过setState()方法进行更新。
我们可以通过把React状态变成“唯一真实的来源”来结合二者。然后，渲染表单的React组件也将控制在用户输入后在表单上发生的事情。其值由React以这种方式进行控制的输入表单元素被称为“受控组件”。
例如，如果我们想让上一个示例在表单被提交时打印name字段的值，我们可以将表单写成受控组件。
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>
);
}
}
由于value属性设置在表单元素上，显示的值将始终是this.state.value,使得React state成了真实的来源。由于handleChange在每次击键后更新React 状态，显示的值将更新为用户类型。
使用受控组件，每个状态变量都具有关联的处理函数。这便能直接修改或验证用户输入。例如，我们强制要Name字段为大写字母书写格式，我们可以写handleChange为：
handleChange(event) {
this.setState({value: event.target.value.toUpperCase()});
}
The textarea Tag（textarea标签）
在HTML中，<textarea>元素的文本由其子元素定义：
<textarea>
Hello there, this is some text in a text area
</textarea>
在React中，<textarea>使用value属性来代替。这种方式下，使用了<textarea>的表单的写法与使用单行输入框的表单的写法非常相似：
class EssayForm extends React.Component {
constructor(props) {
super(props);
this.state = {
value: 'Please write an essay about your favorite DOM element.'
};
this.handleChange = this.handleChange.bind(this);
this.handleSubmit = this.handleSubmit.bind(this);
}
handleChange(event) {
this.setState({value: event.target.value});
}
handleSubmit(event) {
alert('An essay was submitted: ' + this.state.value);
event.preventDefault();
}
render() {
return (
<form onSubmit={this.handleSubmit}>
<label>
Name:
<textarea value={this.state.value} onChange={this.handleChange} />
</label>
<input type="submit" value="Submit" />
</form>
);
}
}
注意，this.state.value在构造函数中被初始化了，因此文本区域中是有一些文字的。
The select Tag（选择标签）
在HTML中，<select>创建一个下拉列表。例如此HTML创建了一个下拉列表：
<select>
<option value="grapefruit">Grapefruit</option>
<option value="lime">Lime</option>
<option selected value="coconut">Coconut</option>
<option value="mango">Mango</option>
</select>
需要注意的是，Coconut选项最初的时候被选择了，因为selected属性。在React中，不会使用selected属性，而是在根select标签上添加value属性来代替。这在受控组件中更方便，因为你只需要在一个地方更新它。例如：
class FlavorForm extends React.Component {
constructor(props) {
super(props);
this.state = {value: 'coconut'};
this.handleChange = this.handleChange.bind(this);
this.handleSubmit = this.handleSubmit.bind(this);
}
handleChange(event) {
this.setState({value: event.target.value});
}
handleSubmit(event) {
alert('Your favorite flavor is: ' + this.state.value);
event.preventDefault();
}
render() {
return (
<form onSubmit={this.handleSubmit}>
<label>
Pick your favorite La Croix flavor:
<select value={this.state.value} onChange={this.handleChange}>
<option value="grapefruit">Grapefruit</option>
<option value="lime">Lime</option>
<option value="coconut">Coconut</option>
<option value="mango">Mango</option>
</select>
</label>
<input type="submit" value="Submit" />
</form>
);
}
}
总的来说, 这样使得<input type="text">, <textarea>, 和 <select>的工作都相似，它们都接受value属性，你可以使用它来实现一个受控组件。
Handling Multiple Inputs（处理多个Inputs）
当你需要处理多个受控的input元素，你可以为每个元素添加一个name属性，让处理函数基于event.target.name的属性值来选择后续该做什么。
例如：
class Reservation extends React.Component {
constructor(props) {
super(props);
this.state = {
isGoing: true,
numberOfGuests: 2
};
this.handleInputChange = this.handleInputChange.bind(this);
}
handleInputChange(event) {
const target = event.target;
const value = target.type === 'checkbox' ? target.checked : target.value; //获取表单控件的属性值
const name = target.name;
this.setState({
[name]: value
});
}
render() {
return (
<form>
<label>
Is going:
<input
name="isGoing"
type="checkbox"
checked={this.state.isGoing}
onChange={this.handleInputChange}
/>
</label>
<br />
<label>
Number of guests:
<input
name="numberOfGuests"
type="number"
value={this.state.numberOfGuests}
onChange={this.handleInputChange}
/>
</label>
</form>
);
}
}
注意，我们是如何使用ES6的 computed property name 语法来更新对应到给定输入框名称的状态键名的：
this.setState({
[name]: value
});
它等同于如下ES5代码：
var partialState = {};
partialState[name] = value;
this.setState(partialState);
此外，由于setState()自动merges a partial state into the current state，我们只需要在调用它时传入已更改的部分。
Alternatives to Controlled Components（受控组件的替代方案）
使用受控组件有时候可能很乏味，因为你需要为数据能够更改的每条路径编写事件处理程序，并且在React组件中pipe输入state的全部。当将预先存在的代码库转换为React或将React应用程序与非React库集成时，这可能会变得特别烦人。在这些情况下，你可能要检查出不受控制的组件，实现输入表单的替代技术。
