8.2 KiB
id | title | permalink | prev | next |
---|---|---|---|---|
forms | フォーム | forms-ja-JP.html | transferring-props-ja-JP.html | working-with-the-browser-ja-JP.html |
<input>
や <textarea>
や <option>
のようなフォームのコンポーネントはユーザの入力によって変化しうるので、他のネイティブのコンポーネントとは異なります。以下のコンポーネントは、ユーザの入力に返答することにおいて、フォームを操作することを簡単にするインターフェースを提供します。
<form>
のイベントについての情報は、フォームのイベントをご覧ください。
双方向のprops
以下のように、フォームのコンポーネントはユーザの入力に影響されるいくつかのpropsをサポートしています。
value
は<input>
と<textarea>
コンポーネントにサポートされています。checked
は<input>
コンポーネントのcheckbox
かradio
タイプにサポートされています。selected
は<option>
コンポーネントにサポートされています。
HTMLでは、 <textarea>
の値は子要素によってセットされます。Reactでは、 value
を代わりに使うべきです。
フォームコンポーネントは onChange
propにコールバックをセットすることで変更を検知することを可能にします。onChange
propはブラウザ上で、ユーザの入力に返答する際に発火するために動きます。それは以下のようなタイミングです。
<input>
か<textarea>
のvalue
が変わる時。<input>
のchecked
ステータスが変わる時。<option>
のselected
ステータスが変わる時。
全てのDOMのイベントのように、 onChange
propは全てのネイティブのコンポーネントにサポートされており、何度も発生するチェンジイベントを検知するのに使われることもあります。
注意:
<input>
と<textarea>
にとって、onChange
は DOMのビルトインのoninput
イベントハンドラの代替のものです。そして、一般的に、代わりに使われています。
制御されたコンポーネント
<input>
と value
のセットは 制御された コンポーネントです。制御された <input>
では、レンダリングされた要素の値は、常に value
propを反映します。例えば、
render: function() {
return <input type="text" value="Hello!" />;
}
上記は、常に Hello!
という値を持つinputをレンダリングするでしょう。ユーザのinputはレンダリングされた要素に何も影響を与えないでしょう。なぜなら、Reactが、値が Hello!
になるように宣言しているからです。ユーザのinputに返答する形で値を更新したいなら、以下のように onChange
イベントが使用できます。
getInitialState: function() {
return {value: 'Hello!'};
},
handleChange: function(event) {
this.setState({value: event.target.value});
},
render: function() {
var value = this.state.value;
return <input type="text" value={value} onChange={this.handleChange} />;
}
この例では、ユーザから提供された、最新の値を単純に受け入れ <input>
コンポーネントの value
propを更新します。 このパターンはユーザの入力に返答したり、バリデーションしたりするインターフェースを実行することを簡単にします。例えば、
handleChange: function(event) {
this.setState({value: event.target.value.substr(0, 140)});
}
上記はユーザのinputを受け入れますが、値を最初の140字に切り取ります。
制御されないコンポーネント
value
を与えられていない(もしくは null
がセットされている) <input>
は 制御されない コンポーネントです。制御されない <input>
では、レンダリングされた要素の値はユーザのinputを反映します。例えば、
render: function() {
return <input type="text" />;
}
上記は、空の値で最初は始まるinputをレンダリングします。どのようなユーザのinputも即座にレンダリングされた要素によって反映されます。値の更新を検知したいなら、 onChange
イベントを、制御されたコンポーネントと同様に使用することができます。
コンポーネントを空ではない値で初期化したいなら、 defaultValue
propを提供することができます。例えば、
render: function() {
return <input type="text" defaultValue="Hello!" />;
}
この例は、上記の 制御されたコンポーネント の例と同じように動くでしょう。
同様に、 <input>
は defaultChecked
をサポートし、 <select>
は defaultValue
をサポートします。
高度なトピック
なぜコントロールされたコンポーネントを使うのでしょうか?
<input>
のようなフォームのコンポーネントをReactで使うことは、伝統的なHTMLのフォームを書いた時には無視される表現であることを表します。例えば、HTMLでは、
<input type="text" name="title" value="Untitled" />
上記は、 Untitled
という値で 初期化 されたinputをレンダリングします。ユーザがinputを更新する時、ノードの value
プロパティ が変更されるでしょう。しかし、 node.getAttribute('value')
は初期化の際に使用された値である Untitled
をまだリターンします。
HTMLと違って、Reactのコンポーネントは初期化の時だけではなく、いつでもビューのステータスを再度表示しなくてはなりません。例えば、Reactでは、
render: function() {
return <input type="text" name="title" value="Untitled" />;
}
このメソッドがいつでもビューを描画するので、次のテキストの入力の値は 常に Untitled
になります。
なぜテキストエリアの値を使うのでしょうか?
HTMLでは、 <textarea>
の値は普通、以下のようにその子要素を使うことでセットされます。
<!-- 反例: このようにはしないでください! -->
<textarea name="description">This is the description.</textarea>
HTMLでは、開発者は簡単に複数行に渡る値を提供できます。しかし、ReactがJavaScriptであるので、文字列の制限を私たちは持っておらず、改行をしたい場合は \n
を使えます。 value
と defaultValue
を私たちが持っている世界では、子要素が果たす役割は曖昧になっています。この理由から、以下のように <textarea>
の値をセットする際には子要素を使うべきではありません。
<textarea name="description" value="This is a description." />
子要素を使うことを 決めた 場合は、 defaultValue
と同様の動きをします。
なぜセレクトバリューを使うのでしょうか?
HTMLの <select>
の選択された <option>
は、普通はオプションの selected
属性によって指定されます。Reactでは、コンポーネントの操作を簡単にするために、以下のようなフォーマットが代わりに適用されます。
<select value="B">
<option value="A">Apple</option>
<option value="B">Banana</option>
<option value="C">Cranberry</option>
</select>
制御されないコンポーネントを作成するために、 defaultValue
が代わりに使われます。
注意: 配列を
value
属性の中に渡すことができます。これで、以下のように、select
タグの中で複数のオプションを選択することができます。<select multiple={true} value={['B', 'C']}>