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がどこから呼び出されているのか。
Modified text is an extract of the original Stack Overflow Documentation
ライセンスを受けた CC BY-SA 3.0
所属していない Stack Overflow