Atualizando o estado profundo do ReactJS

Question

Eu tenho uma série de itens em um estado de componente ReactJS que estou iterando para criar um formulário.Minha pergunta é:Qual a melhor forma de atualizar esses itens quando os campos mudam?

Por exemplo:

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

Qual seria a aparência do meu manipulador onChange neste caso?Eu mudo o item.baz propriedade diretamente, então this.setState(state)?Parece errado.Estou olhando para o Ajudantes de imutabilidade do React, mas veja como trabalhar com índices de array.

Obrigado.

Answer 1

Você poderia usar o índice para atualizar o item correto da matriz, passando-o para onChange através da bind e então construir dinamicamente o objeto para passar para 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>;
    }
});

Meu entendimento de que isso só tem uma vantagem sobre algo como

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

se você vai substituir shouldComponentUpdate e ser mais seletivo sobre quando renderizar novamente do que sempre this.setState() é chamado.

jsfiddle

Answer 2

Pensei em lançar esta biblioteca porque ela foi projetada especificamente para estados de reação profundamente aninhados,

https://github.com/mquan/cortex

Você pode atualizar itens dentro de cada componente e ele aparece automaticamente sem que você precise definir retornos de chamada para passar o evento.