ウェブ開発ではブラウザのJS処理やロジックが複雑になってしまうときがありますね。
そんな時は、Reactを使ってシンプルにしてみましょう。

Reactの公式サイト https://reactjs.org/

コンポーネントを作成する

まずReactでコンポーネントを作成したいときは以下のように定義します。

Storeは状態を保管しておくものです。Storeの値を変更してもViewは何も変わりません。
一方、Stateも状態を保管しておくものですが、Storeの値が変更されると、それに連動してViewも変更されます。

Stateの値を変更したいときはsetStateのメソッドを使用します。 (https://reactjs.org/docs/react-component.html#setstate)

例えば、以下のコンポーネントがあります。

上記のコンポーネントonClickChangeNameの中にStatenameの値を変更するためsetStateメソッドを使用して、Statenameの値が変更される同時にViewnameの値も変更されます。

コンポーネントのStateを変更する

コンポーネント内のStateを変更するのは上記のように簡単ですが、別のコンポーネントStateを変更したい場合はどうするのがよいでしょうか。
例えばorderリストがあって、1つのordernameが変更されるとき全体にnameが変更されるorderを出力する機能があります。その機能を実装してみましょう。

まずは各コンポーネントを定義します。

ListOrderコンポーネント:

OrderDetailコンポーネント

次にOrderStoreというEventEmitterを定義します。

最後にOrderActionConstを定義します。

OrderListcomponentDidMount()の中にOrderStore.addListener(() => this.setState(OrderStore.all)を追加しましたので、OrrderStoreに何かの変更があったらコールバック関数が呼ばれてStoreordersの値をStateの値に適用します。そのため、OrderDetailのコンポーネントにnameが変更されるときOrderDetailListコンポーネントにも更新されます。

Reactを活用すれば、複雑の処理やロジックを簡単に実装できます。
みんなさんもReactを使ってみてくださいね。