Translate 10.2-form-input-binding-sugar.md to Japanese
Kohei TAKATA committed
Jul 15, 2015 at 09:20 UTC
024f5fc595877e9940b90e7ecc17687d15a2ce39
1 file changed
+114
docs/docs/10.2-form-input-binding-sugar.ja-JP.md
new
+114
@@ -0,0 +1,114 @@
1
+---
2
+id: two-way-binding-helpers
3
+title: 2ウェイバインディングのヘルパ
4
+permalink: two-way-binding-helpers-ja-JP.html
5
+prev: animation-ja-JP.html
6
+next: test-utils-ja-JP.html
7
+---
8
+
9
+`ReactLink` はReactで2ウェイバインディングを表現する簡単な方法です。
10
+
11
+> 注意:
12
+> もしあなたがフレームワークについてあまりよく知らないのであれば、 `ReactLink` は多くのアプリケーションには必要なく、慎重に使うべきであることに注意してください。
13
+
14
+Reactでは所有者から子要素へと、データの流れは一方向です。これはデータが[Von Neumannのコンピューティングモデル](https://en.wikipedia.org/wiki/Von_Neumann_architecture)によって一方向にのみ流れるからです。これを「1ウェイデータバインディング」だと考えることができます。
15
+
16
+しかし、データやプログラムに戻る流れを読む必要が有るアプリケーションもたくさんあります。例えば、フォームを作る際に、ユーザのインプットを受け取った時には、Reactの `state` を更新したいと思うことはよくあるでしょう。または、JavaScriptでレイアウトを形作ったり、DOM要素のサイズの変化に反応したいと思うでしょう。
17
+
18
+Reactでは、「変更」のイベントを検知し、データソース（普通はDOMです）を読み、コンポーネントのうちの1つの上で `setState()` を呼ぶことでこの要求を満たすことができます。「データフローのループを止めること」は理解しやすく、維持しやすいプログラムを明確に導きます。詳細な情報については、[フォームのドキュメント](/react/docs/forms-ja-JP.html)をご覧ください。
19
+
20
+2ウェイバインディングはDOMの値が常にReactの `state` と一致していることを暗黙に強制しますが、簡潔で、多くの種類のアプリケーションをサポートします。上で説明されているような共通のデータフローループパターンのセットアップや、データソースをReactの `state` に「接続する」ための糖衣構文である `ReactLink` が提供されています。
21
+
22
+> 注意:
23
+> `ReactLink` は薄いラッパーであり、 `onChange`/`setState()` パターンにおける習慣です。Reactアプリケーションのデータフローの方法を根本から変えるようなものではありません。
24
+
25
+## ReactLink: ビフォーアフター
26
+
27
+以下が、 `ReactLink` を使用しない単純なフォームの例です。
28
+
29
+```javascript
30
+var NoLink = React.createClass({
31
+ getInitialState: function() {
32
+ return {message: 'Hello!'};
33
+ },
34
+ handleChange: function(event) {
35
+ this.setState({message: event.target.value});
36
+ },
37
+ render: function() {
38
+ var message = this.state.message;
39
+ return <input type="text" value={message} onChange={this.handleChange} />;
40
+ }
41
+});
42
+```
43
+
44
+これはとてもよく動き、データがどう流れているかとても明確です。しかし、たくさんのフォームのフィールドがあった場合、少し冗長になります。以下のように、 `ReactLink` を使うことでタイピング量が少なくて済みます。
45
+
46
+```javascript{2,7}
47
+var WithLink = React.createClass({
48
+ mixins: [React.addons.LinkedStateMixin],
49
+ getInitialState: function() {
50
+ return {message: 'Hello!'};
51
+ },
52
+ render: function() {
53
+ return <input type="text" valueLink={this.linkState('message')} />;
54
+ }
55
+});
56
+```
57
+
58
+`LinkedStateMixin` は `linkState()` と呼ばれるReactコンポーネントにメソッドを追加します。
59
+`linkState()` はReactのステータスの現在の値と、それを変更するコールバックを持った `ReactLink` オブジェクトを返します。
60
+
61
+`ReactLink` オブジェクトはプロパティとして、木構造の上や下に渡される可能性があります。だから、階層の深い位置にいるコンポーネントと階層の高い位置にいるステータスの間の2ウェイバインディングをセットアップすることは簡単（で、明確）です。
62
+
63
+チェックボックスはその `value` 属性に対しての特別な態度を持っていることに注意してください。それは、チェックボックスがチェックされている（デフォルトで `on` ）場合にフォームのサブミットで送信される値です。 `value` 属性はチェックボックスがチェックされていても、チェックされていなくても、更新されません。チェックボックスについては、`valueLink` の代わりに、 `checkedLink` を使うべきです。以下のように。
64
+
65
+```
66
+<input type="checkbox" checkedLink={this.linkState('booleanValue')} />
67
+```
68
+
69
+
70
+## フードの下
71
+
72
+`ReactLink` には2つの側面があります。 `ReactLink` のインスタンスを作成する場所と、それを使う場所です。 `ReactLink` がどれだけ単純か証明するために、それぞれの側面を分けて、明確に再度記述してみましょう。
73
+
74
+### LinkedStateMixinを使わないReactLink
75
+
76
+```javascript{5-7,9-12}
77
+var WithoutMixin = React.createClass({
78
+ getInitialState: function() {
79
+ return {message: 'Hello!'};
80
+ },
81
+ handleChange: function(newValue) {
82
+ this.setState({message: newValue});
83
+ },
84
+ render: function() {
85
+ var valueLink = {
86
+ value: this.state.message,
87
+ requestChange: this.handleChange
88
+ };
89
+ return <input type="text" valueLink={valueLink} />;
90
+ }
91
+});
92
+```
93
+
94
+今まで見てきたように `ReactLink` オブジェクトは `value` と `requestChange` プロパティだけを持ったとても単純なオブジェクトです。そして、 `LinkedStateMixin` も同様に単純です。それらのフィールドを `this.state` の値と、 `this.setState()` を呼ぶコールバックで満たします。
95
+
96
+### valueLinkを使わないReactLink
97
+
98
+```javascript
99
+var WithoutLink = React.createClass({
100
+ mixins: [React.addons.LinkedStateMixin],
101
+ getInitialState: function() {
102
+ return {message: 'Hello!'};
103
+ },
104
+ render: function() {
105
+ var valueLink = this.linkState('message');
106
+ var handleChange = function(e) {
107
+ valueLink.requestChange(e.target.value);
108
+ };
109
+ return <input type="text" value={valueLink.value} onChange={handleChange} />;
110
+ }
111
+});
112
+```
113
+
114
+`valueLink` プロパティも同様にとても単純です。単純に `onChange` イベントをハンドルし、 `this.props.valueLink.requestChange()` を呼び、 `this.props.value` の代わりに `this.props.valueLink.value` を使用します。それだけです！
\ No newline at end of file