公式のReact.jsライブラリドキュメントのAdvanced Guidesセクションの一連の翻訳の継続。
Reactの非制御コンポーネント
ほとんどの場合、 制御されたコンポーネントを使用してフォームを実装することをお勧めします。 制御されたコンポーネントでは、フォームデータはReactコンポーネントによって処理されます。 代替手段があります-これらは、フォームデータがDOM自体によって処理される非制御コンポーネントです。
制御されていないコンポーネントを記述する場合、状態の更新ごとにイベントハンドラを記述する代わりに、 refを使用してDOMからフォーム値を取得できます。
たとえば、次のコードは、制御されていないコンポーネントのフォームからName値を取得します。
class NameForm extends React.Component { constructor(props) { super(props); this.handleSubmit = this.handleSubmit.bind(this); } handleSubmit(event) { alert('A name was submitted: ' + this.input.value); event.preventDefault(); } render() { return ( <form onSubmit={this.handleSubmit}> <label> Name: <input type="text" ref={(input) => this.input = input} /> </label> <input type="submit" value="Submit" /> </form> ); } }
実際のデータは制御されていないコンポーネントのDOMに格納されているため、そのようなコンポーネントを使用すると、Reactコードと非Reactコードの統合（接続）が容易になる場合があります。 コードの純度を犠牲にして、より少ない量のコード（およびその結果として記述する速度）に興味がある場合-これはオプションです。 そうでない場合は、制御されたコンポーネントを使用することをお勧めします。
デフォルト値
React表示（レンダリング）ライフサイクルでは、フォーム要素のvalue
属性がDOMの値をオーバーライドします。 非制御コンポーネントでは、多くの場合、初期値を設定する必要がありますが、その後の更新は制御できません。 この場合、 value
代わりにdefaultValue
属性を設定できvalue
。
render() { return ( <form onSubmit={this.handleSubmit}> <label> Name: <input defaultValue="Bob" type="text" ref={(input) => this.input = input} /> </label> <input type="submit" value="Submit" /> </form> ); }
さらに、 <input type="checkbox">
および<input type="radio">
はdefaultChecked
属性をサポートし、 <select>
はdefaultValue
サポートし<select>
。
次の部分：
前のパーツ：