せいぎょようそ
8120 ワード
せいぎょようそ
HTMLでは、
<input>
、<textarea>
、<select>
などのフォーム要素は、通常、ユーザ入力に基づいて自分の状態を管理および更新する.react stateを「信頼できる単一ソース(single source of truth)」として作成し、2つの要素を結合できます.次に、レンダーフォームのReact構成部品は、フォーム内のユーザーの入力値を制御します.このようにreactによって値を制御する入力フォーム要素を制御素子(controlled component)と呼ぶ.
class NameForm extends React.Component {
constructor(props) {
super(props);
this.state = {value: ''};
this.handleChange = this.handleChange.bind(this);
this.handleSubmit = this.handleSubmit.bind(this);
}
handleChange(event) {
this.setState({value: event.target.value});
}
handleSubmit(event) {
alert('A name was submitted: ' + this.state.value);
event.preventDefault();
}
render() {
return (
<form onSubmit={this.handleSubmit}>
<label>
Name:
<input type="text" value={this.state.value} onChange={this.handleChange} />
</label>
<input type="submit" value="Submit" />
</form>
);
}
}
valueartreviewはフォーム別名に設定されているため、表示される値は常にthis.state.value
であり、react stateは信頼できる単一のソースである.すべてのキー入力においてhandleChange
が更新されるので、ユーザが入力すると表示される値が更新される.制御素子を使用する場合、inputの値は常にreact stateによって決定されます.
これは、より多くのコードを記述する必要があることを意味しますが、inputの値を他のUIエイリアスに渡すか、他のイベントハンドラで値をリセットできます.
詳細
もしあなたが制御素子を勉強したら?
useStateによる構成部品の管理
useState関数式更新
Reference
この問題について(せいぎょようそ), 我々は、より多くの情報をここで見つけました https://velog.io/@yunsungyang-omc/React-제어-컴포넌트-Controlled-Componentテキストは自由に共有またはコピーできます。ただし、このドキュメントのURLは参考URLとして残しておいてください。
Collection and Share based on the CC Protocol