React
反応フォーム

制御されたコンポーネント

制御コンポーネントは値にバインドされ、その変更はイベントベースのコールバックを使用してコードで処理されます。

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>
    )
}

}

この例では、空のpersonオブジェクトで状態を初期化します。その後、2つの入力の値をpersonオブジェクトの個々のキーにバインドします。ユーザーがタイプすると、 handleChange関数で各値を取得します。コンポーネントの値は状態にバインドされているので、 setState()呼び出すことでユーザーが入力したときに再レンダリングできます。

注：コントロールされたコンポーネントを扱うときに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 。もちろん、これは現在どの入力が入力されているかによって異なります。ユーザーが入力する場所、辞書を使用して入力名をキーの名前と一致させることができないため、ユーザー入力なしonChangeがどこから呼び出されているのか。