©
本文档使用
php.cn手册 发布
HTML表单元素与React中的其他DOM元素有点不同，因为表单元素自然会保留一些内部状态。例如，这个纯HTML格式的表单接受一个名称：
<form> <label> Name: <input type="text" name="name" /> </label> <input type="submit" value="Submit" /> </form>
此表单具有用户提交表单时浏览到新页面的默认HTML表单行为。如果你想在React中使用这种行为，那就行了。但是在大多数情况下，使用JavaScript函数可以方便地处理提交表单并可以访问用户在表单中输入的数据。实现这一目标的标准方法是使用称为“受控组件”的技术。
受控组件
在HTML中，表单元素（例如<input>，<textarea>）<select>通常保持其自己的状态并根据用户输入进行更新。在React中，可变状态通常保存在组件的状态属性中，并且只能使用更新setState()。
我们可以通过使React状态成为“单一真相源”来结合这两者。然后，呈现表单的React组件也控制后续用户输入中以该表单发生的事情。输入表单元素的值由React以这种方式控制，称为“受控组件”。
例如，如果我们想让前面的示例在提交时记录名称，我们可以将表单编写为受控组件：
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状态成为真值的来源。由于handleChange每次击键时都会运行以更新React状态，因此显示的值将随用户键入而更新。
对于受控组件，每个状态变异都会有一个关联的处理函数。这使修改或验证用户输入变得非常简单。例如，如果我们想强制使用全部大写字母来编写名称，我们可以这样写handleChange：
handleChange(event) { this.setState({value: event.target.value.toUpperCase()});}textarea标签
在HTML中，一个<textarea>元素通过子元素定义其文本：
<textarea> Hello there, this is some text in a text area</textarea>
在React中， 改为<textarea>使用value属性。这样，使用a的表单<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在构造函数中初始化，以便文本区域以其中的一些文本开始。
选择标签
在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>
请注意，由于selected属性，Coconut选项最初被选中。反应，而不是使用此selected属性，使用value根select标签上的属性。这在受控组件中更方便，因为您只需要在一个位置更新它。例如：
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，你可以用它来实现控制组件属性。
注意您可以将数组传递给该
value属性，从而允许您在select标签中选择多个选项：<select multiple = {true} value = {'B'，'C'}>
处理多个输入
当需要处理多个受控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 计算的属性名称语法来更新与给定输入名称对应的状态键：
this.setState({ [name]: value});它相当于这个ES5代码：
var partialState = {};partialState[name] = value;this.setState(partialState);此外，由于setState()自动将局部状态合并到当前状态，因此我们只需要用改变的部分调用它。
受控输入空值
在受控组件上指定值prop可以防止用户更改输入，除非您愿意。如果您已指定a value但输入仍可编辑，则可能意外设置value为undefined或null。
以下代码演示了这一点。（输入首先被锁定，但在短暂延迟后变为可编辑。）
ReactDOM.render(<input value="hi" />, mountNode);
setTimeout(function() {
ReactDOM.render(<input value={null} />, mountNode);}, 1000);受控组件的替代品
使用受控组件有时会非常乏味，因为您需要为数据可以改变的每种方式编写一个事件处理程序，并通过React组件管理所有输入状态。当您将预先存在的代码库转换为React或将React应用程序与非React库集成时，这会变得特别烦人。在这些情况下，您可能需要检查不受控制的组件，这是实现输入表单的另一种技术。