React
フォームとユーザー入力
サーチ…
制御されたコンポーネント
制御されたフォームコンポーネントは、 value
プロパティで定義されます。制御入力の値はReactによって管理され、ユーザー入力はレンダリングされた入力に直接影響しません。代わりに、 value
プロパティの変更はこの変更を反映する必要があります。
class Form extends React.Component {
constructor(props) {
super(props);
this.onChange = this.onChange.bind(this);
this.state = {
name: ''
};
}
onChange(e) {
this.setState({
name: e.target.value
});
}
render() {
return (
<div>
<label for='name-input'>Name: </label>
<input
id='name-input'
onChange={this.onChange}
value={this.state.name} />
</div>
)
}
}
上の例は、 value
プロパティが入力の現在の値を定義し、 onChange
イベントハンドラがコンポーネントの状態をユーザの入力で更新する方法を示していvalue
。
フォーム入力は、可能であれば、制御されたコンポーネントとして定義する必要があります。これにより、ユーザー入力以外のトリガーによって値が変更されても、コンポーネントの状態と入力値が常に同期します。
制御されていないコンポーネント
制御されていないコンポーネントは、 value
プロパティを持たない入力です。制御対象コンポーネントとは反対に、コンポーネントの状態と入力値を同期させておくのはアプリケーションの責任です。
class Form extends React.Component {
constructor(props) {
super(props);
this.onChange = this.onChange.bind(this);
this.state = {
name: 'John'
};
}
onChange(e) {
this.setState({
name: e.target.value
});
}
render() {
return (
<div>
<label for='name-input'>Name: </label>
<input
id='name-input'
onChange={this.onChange}
defaultValue={this.state.name} />
</div>
)
}
}
ここでは、コンポーネントの状態は、制御されたコンポーネントと同様に、 onChange
イベントハンドラを介して更新されます。ただし、 value
プロパティの代わりにdefaultValue
プロパティが指定されています。これは、最初のレンダリング中に入力の初期値を決定します。コンポーネントの状態に対するその後の変更は、入力値によって自動的に反映されません。これが必要な場合は、制御されたコンポーネントを代わりに使用する必要があります。
Modified text is an extract of the original Stack Overflow Documentation
ライセンスを受けた CC BY-SA 3.0
所属していない Stack Overflow