Обновление глубокого состояния ReactJS

У меня есть массив элементов в состоянии компонента ReactJS, который я повторяю для создания формы. Мой вопрос: как лучше всего обновлять эти элементы при изменении полей?

Например:

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

Как выглядит мой обработчик onChange в этом случае? Я могу изменить свойство item.baz напрямую, затем this.setState(state)? Кажется, неправильно. Я смотрю на Помощники по неизменному действию, но посмотрим, как работать с индексами массива.

Спасибо.

Ответ 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().

jsfiddle

Ответ 2

Думал, что я просто выброшу эту библиотеку там, потому что она была специально разработана для глубоко вложенного состояния реакции,

https://github.com/mquan/cortex

Вы можете обновлять элементы в каждом компоненте, и он автоматически просачивается без необходимости определять обратные вызовы для передачи события вверх.