Translate 07-forms.md to Japanese
Kohei TAKATA committed
Jul 6, 2015 at 19:17 UTC
b66a520d133d09ba74fb9f88441d3816907a45e1
1 file changed
+150
docs/docs/07-forms.ja-JP.md
new
+150
@@ -0,0 +1,150 @@
1
+---
2
+id: forms
3
+title: フォーム
4
+permalink: forms-ja-JP.html
5
+prev: transferring-props-ja-JP.html
6
+next: working-with-the-browser-ja-JP.html
7
+---
8
+
9
+`<input>` や `<textarea>` や `<option>` のようなフォームのコンポーネントはユーザの入力によって変化しうるので、他のネイティブのコンポーネントとは異なります。以下のコンポーネントは、ユーザの入力に返答することにおいて、フォームを操作することを簡単にするインターフェースを提供します。
10
+
11
+`<form>` のイベントについての情報は、[フォームのイベント](/react/docs/events.html#form-events)をご覧ください。
12
+
13
+## 双方向のprops
14
+
15
+以下のように、フォームのコンポーネントはユーザの入力に影響されるいくつかのpropsをサポートしています。
16
+
17
+* `value` は `<input>` と `<textarea>` コンポーネントにサポートされています。
18
+* `checked` は `<input>` コンポーネントの `checkbox` か `radio` タイプにサポートされています。
19
+* `selected` は `<option>` コンポーネントにサポートされています。
20
+
21
+HTMLでは、 `<textarea>` の値は子要素によってセットされます。Reactでは、 `value` を代わりに使うべきです。
22
+
23
+フォームコンポーネントは `onChange` propにコールバックをセットすることで変更を検知することを可能にします。`onChange` propはブラウザ上で、ユーザの入力に返答する際に発火するために動きます。それは以下のようなタイミングです。
24
+
25
+* `<input>` か `<textarea>` の `value` が変わる時。
26
+* `<input>` の `checked` ステータスが変わる時。
27
+* `<option>` の `selected` ステータスが変わる時。
28
+
29
+全てのDOMのイベントのように、 `onChange` propは全てのネイティブのコンポーネントにサポートされており、何度も発生するチェンジイベントを検知するのに使われることもあります。
30
+
31
+> 注意:
32
+> `<input>` と `<textarea>` にとって、 `onChange` は DOMのビルトインの [`oninput`](https://developer.mozilla.org/en-US/docs/Web/API/GlobalEventHandlers/oninput) イベントハンドラの代替のものです。そして、一般的に、代わりに使われています。
33
+
34
+## 制御されたコンポーネント
35
+
36
+`<input>` と `value` のセットは *制御された* コンポーネントです。制御された `<input>` では、レンダリングされた要素の値は、常に `value` propを反映します。例えば、
37
+
38
+```javascript
39
+ render: function() {
40
+ return <input type="text" value="Hello!" />;
41
+ }
42
+```
43
+
44
+上記は、常に `Hello!` という値を持つinputをレンダリングするでしょう。ユーザのinputはレンダリングされた要素に何も影響を与えないでしょう。なぜなら、Reactが、値が `Hello!` になるように宣言しているからです。ユーザのinputに返答する形で値を更新したいなら、以下のように `onChange` イベントが使用できます。
45
+
46
+```javascript
47
+ getInitialState: function() {
48
+ return {value: 'Hello!'};
49
+ },
50
+ handleChange: function(event) {
51
+ this.setState({value: event.target.value});
52
+ },
53
+ render: function() {
54
+ var value = this.state.value;
55
+ return <input type="text" value={value} onChange={this.handleChange} />;
56
+ }
57
+```
58
+
59
+この例では、ユーザから提供された、最新の値を単純に受け入れ `<input>` コンポーネントの `value` propを更新します。 このパターンはユーザの入力に返答したり、バリデーションしたりするインターフェースを実行することを簡単にします。例えば、
60
+
61
+```javascript
62
+ handleChange: function(event) {
63
+ this.setState({value: event.target.value.substr(0, 140)});
64
+ }
65
+```
66
+
67
+上記はユーザのinputを受け入れますが、値を最初の140字に切り取ります。
68
+
69
+
70
+## 制御されないコンポーネント
71
+
72
+`value` を与えられていない（もしくは `null` がセットされている） `<input>` は *制御されない* コンポーネントです。制御されない `<input>` では、レンダリングされた要素の値はユーザのinputを反映します。例えば、
73
+
74
+```javascript
75
+ render: function() {
76
+ return <input type="text" />;
77
+ }
78
+```
79
+
80
+上記は、空の値で最初は始まるinputをレンダリングします。どのようなユーザのinputも即座にレンダリングされた要素によって反映されます。値の更新を検知したいなら、 `onChange` イベントを、制御されたコンポーネントと同様に使用することができます。
81
+
82
+コンポーネントを空ではない値で初期化したいなら、 `defaultValue` propを提供することができます。例えば、
83
+
84
+```javascript
85
+ render: function() {
86
+ return <input type="text" defaultValue="Hello!" />;
87
+ }
88
+```
89
+
90
+この例は、上記の **制御されたコンポーネント** の例と同じように動くでしょう。
91
+
92
+同様に、 `<input>` は `defaultChecked` をサポートし、 `<select>` は `defaultValue` をサポートします。
93
+
94
+## 高度なトピック
95
+
96
+
97
+### なぜコントロールされたコンポーネントを使うのでしょうか？
98
+
99
+`<input>` のようなフォームのコンポーネントをReactで使うことは、伝統的なHTMLのフォームを書いた時には無視される表現であることを表します。例えば、HTMLでは、
100
+
101
+```html
102
+ <input type="text" name="title" value="Untitled" />
103
+```
104
+
105
+上記は、 `Untitled` という値で *初期化* されたinputをレンダリングします。ユーザがinputを更新する時、ノードの `value` *プロパティ* が変更されるでしょう。しかし、 `node.getAttribute('value')` は初期化の際に使用された値である `Untitled` をまだリターンします。
106
+
107
+HTMLと違って、Reactのコンポーネントは初期化の時だけではなく、いつでもビューのステータスを再度表示しなくてはなりません。例えば、Reactでは、
108
+
109
+```javascript
110
+ render: function() {
111
+ return <input type="text" name="title" value="Untitled" />;
112
+ }
113
+```
114
+
115
+このメソッドがいつでもビューを描画するので、次のテキストの入力の値は *常に* `Untitled` になります。
116
+
117
+
118
+### なぜテキストエリアの値を使うのでしょうか？
119
+
120
+HTMLでは、 `<textarea>` の値は普通、以下のようにその子要素を使うことでセットされます。
121
+
122
+```html
123
+ <!-- 反例: このようにはしないでください！ -->
124
+ <textarea name="description">This is the description.</textarea>
125
+```
126
+
127
+HTMLでは、開発者は簡単に複数行に渡る値を提供できます。しかし、ReactがJavaScriptであるので、文字列の制限を私たちは持っておらず、改行をしたい場合は `\n` を使えます。 `value` と `defaultValue` を私たちが持っている世界では、子要素が果たす役割は曖昧になっています。この理由から、以下のように `<textarea>` の値をセットする際には子要素を使うべきではありません。
128
+
129
+```javascript
130
+ <textarea name="description" value="This is a description." />
131
+```
132
+
133
+子要素を使うことを *決めた* 場合は、 `defaultValue` と同様の動きをします。
134
+
135
+### なぜセレクトバリューを使うのでしょうか？
136
+
137
+HTMLの `<select>` の選択された `<option>` は、普通はオプションの `selected` 属性によって指定されます。Reactでは、コンポーネントの操作を簡単にするために、以下のようなフォーマットが代わりに適用されます。
138
+
139
+```javascript
140
+ <select value="B">
141
+ <option value="A">Apple</option>
142
+ <option value="B">Banana</option>
143
+ <option value="C">Cranberry</option>
144
+ </select>
145
+```
146
+
147
+制御されないコンポーネントを作成するために、 `defaultValue` が代わりに使われます。
148
+
149
+> 注意:
150
+> 配列を `value` 属性の中に渡すことができます。これで、以下のように、 `select` タグの中で複数のオプションを選択することができます。 `<select multiple={true} value={['B', 'C']}>`