Mise à jour de l'état profond de ReactJS

Question

J'ai un tableau d'éléments dans un état de composant ReactJS sur lequel je parcourt pour créer un formulaire.Ma question est:Quelle est la meilleure façon de mettre à jour ces éléments lorsque les champs changent ?

Par exemple:

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

À quoi ressemblerait mon gestionnaire onChange dans ce cas ?Est-ce que je change le item.baz propriété directement, alors this.setState(state)?Cela semble faux.je regarde le Réagir aux assistants d'immuabilité, mais voyez comment travailler avec les index de tableau.

Merci.

Answer 1

Vous pouvez utiliser l'index pour mettre à jour l'élément correct du tableau en le transmettant à onChange via bind puis construire dynamiquement l'objet auquel passer 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>;
    }
});

Je crois comprendre que cela n'a qu'un avantage par rapport à quelque chose comme

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

si vous voulez passer outre shouldComponentUpdate et soyez plus sélectif quant au moment de restituer qu'à chaque fois this.setState() est appelé.

jsfiddle

Answer 2

Je pensais que je lancerais cette bibliothèque car elle a été spécialement conçue pour les états de réaction profondément imbriqués,

https://github.com/mquan/cortex

Vous pouvez mettre à jour des éléments dans chaque composant et cela se répercute automatiquement sans que vous ayez à définir des rappels pour transmettre l'événement.