Обновление состояния deep ReactJS
-
20-12-2019 - |
Вопрос
У меня есть массив элементов в состоянии компонента ReactJS, который я перебираю, чтобы создать форму.Мой вопрос таков:Как мне лучше всего обновить эти элементы при изменении полей?
Например:
var items = this.state.foo.bar.items.map(function(item, i) {
return <input value={item.baz} onChange={??}
});
Как бы выглядел мой обработчик onChange в этом случае?Должен ли я изменить item.baz
собственность непосредственно, тогда this.setState(state)
?Кажется неправильным.Я смотрю на Помощники по реагированию на неизменность, но посмотрите, как работать с индексами массивов.
Спасибо.
Решение
Вы могли бы использовать индекс для обновления правильного элемента массива, передав его в 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()
называется.
Другие советы
думал, что я просто брошу эту библиотеку там, потому что она была специально разработана для глубокого вложенного состояния реагирования,
https://github.com/mquan/cortex
Вы можете обновить элементы в каждом компонент, и он автоматически обходит без необходимости определять обратные вызовы, чтобы пройти событие вверх.