Deep ReactJS Stateの更新

Question

ReactJSコンポーネントの配列は、フォームを作成するために繰り返して繰り返します。私の質問は：フィールドが変わったらそれらのアイテムを最適に更新するのでしょうか。

例えば：

var items = this.state.foo.bar.items.map(function(item, i) {
    return <input value={item.baz} onChange={??}
});

.

この場合、私のonchangeハンドラはどのようなものですか？item.bazプロパティを直接変更してからthis.setState(state)を変更しますか？間違っているようです。私は Imutability Helpers を見ていますが、配列インデックスを使用する方法を参照してください。

ありがとう。

Answer 1

onChangeを介してbindに渡して、索引を渡してからupdateに渡すオブジェクトを動的に構築することで、正しい配列項目を更新できます。

var Hello = React.createClass({
    getInitialState : function() {
      return  {
        foo : {
          bar : {
            items : [ { baz : 1 }, { baz : 2 }, { baz : 3 } ]
          }
        }
      };
    },
    onChange : function( idx, item, event ) {
      var objForUpdate = { foo: { bar: { items : {} } } };
      objForUpdate.foo.bar.items[ idx ] = { $set : { baz : event.target.value } };
      var newData = React.addons.update( this.state, objForUpdate );
      this.setState( newData );
    },
    render: function() {
      var _this = this;
      var items = this.state.foo.bar.items.map(function(item, i) {
        return <input value={item.baz} onChange={_this.onChange.bind( _this, i, item )}></input>
      });
      return <div>{items}</div>;
    }
});

.

これは、

のようなものよりも有利なのを持っていることを理解しています

onChange : function( idx, item, event ) {
  item.baz = event.target.value;
  this.setState( this.state );
}

.

shouldComponentUpdate とthis.setState()が呼び出されるたびにRERNENDERを実行するときについて選択的に選択されます。

jsfiddle

Answer 2

は、深く入れ子の反応状態のために特に設計されているので、この図書館をそこに投げるだけで、

https://github.com/mquan/cortex

各コンポーネント内のアイテムを更新して、イベントアップを渡すためにコールバックを定義する必要なしで自動的に細流化することができます。