受控元件

受控元件繫結到一個值，並使用基於事件的回撥在程式碼中處理其更改。

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。