受控组件

受控组件绑定到一个值，并使用基于事件的回调在代码中处理其更改。

class CustomForm extends React.Component {
constructor() {
    super();
    this.state = {
        person: {
            firstName: '',
            lastName: ''
        }
    }
}

handleChange(event) {
    let person = this.state.person;
    person[event.target.name] = event.target.value;
    this.setState({person});
}

render() {
    return (
        <form>
            <input 
            type="text"
            name="firstName"
            value={this.state.firstName}
            onChange={this.handleChange.bind(this)} />

            <input 
            type="text"
            name="lastName"
            value={this.state.lastName}
            onChange={this.handleChange.bind(this)} />
        </form>
    )
}

}

在此示例中，我们使用空人对象初始化状态。然后，我们将 2 个输入的值绑定到 person 对象的各个键。然后，当用户键入时，我们捕获 handleChange 函数中的每个值。由于组件的值绑定到状态，我们可以通过调用 setState() 在用户键入时重新渲染。

注意： 在处理受控组件时不调用 setState() 将导致用户键入，但不会看到输入，因为 React 仅在被告知这样做时才会呈现更改。

同样重要的是要注意输入的名称与 person 对象中键的名称相同。这允许我们以字典形式捕获值，如此处所示。

handleChange(event) {
    let person = this.state.person;
    person[event.target.name] = event.target.value;
    this.setState({person});
}

person[event.target.name] 同样是一个 person.firstName || person.lastName。当然这取决于当前输入的输入。由于我们不知道用户将在何处键入，使用字典并将输入名称与键名称匹配，因此我们可以捕获用户输入 no 从何处调用 onChange。