Aggiornamento del profondo reactjs stato

Question

Ho una serie di articoli in uno stato di componente ReactJS che sto per creare un modulo.La mia domanda è: come posso aggiornare meglio quegli elementi quando i campi cambiano?

Ad esempio:

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

.

Come sarebbe il mio gestore onchange in questo caso?Modo direttamente la proprietà item.baz, quindi this.setState(state)?Sembra sbagliatoSto guardando il Aiuttamenti di immutabilità reagiscono , ma vedi come lavorare con gli indici di array. Grazie.

Answer 1

È possibile utilizzare l'indice per aggiornare l'elemento di array corretto passandolo su onChange tramite bind e quindi costruire dinamicamente l'oggetto per passare a 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>;
    }
});

.

La mia comprensione che questo ha solo un vantaggio rispetto a qualcosa come

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

.

Se si sta per sovrascrivere shouldComponentUpdate eSii più selettivo su quando viene chiamato Reerender rispetto a ogni volta che viene chiamato this.setState().

jsfiddle

Answer 2

Pensavo di lanciare questa biblioteca là fuori perché è stato specificamente progettato per lo stato reagito profondamente annidato,

https://github.com/mquan/corx

È possibile aggiornare gli elementi all'interno di ciascun componente e ruota automaticamente senza che tu debba definire i callback per passare l'evento.