Aktualisieren des tiefen ReactJS-Status

Question

Ich habe ein Array von Elementen in einem ReactJS-Komponentenstatus, über das ich iteriere, um ein Formular zu erstellen.Meine Frage ist:Wie aktualisiere ich diese Elemente am besten, wenn sich die Felder ändern?

Zum Beispiel:

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

Wie würde mein onChange-Handler in diesem Fall aussehen?Ändere ich das item.baz Eigentum also direkt this.setState(state)?Scheint falsch.Ich schaue mir das an Reagieren Sie auf Unveränderlichkeitshelfer, aber sehen Sie sich an, wie Sie mit Array-Indizes arbeiten.

Danke.

Answer 1

Sie können den Index verwenden, um das richtige Array-Element zu aktualisieren, indem Sie es an übergeben onChange über bind und dann dynamisch das Objekt erstellen, an das übergeben werden soll 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>;
    }
});

Ich verstehe, dass dies nur einen Vorteil gegenüber so etwas hat

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

wenn Sie überschreiben wollen shouldComponentUpdate und wählen Sie den Zeitpunkt des erneuten Renderns selektiver aus als jedes Mal this.setState() wird genannt.

jsfiddle

Answer 2

Ich dachte, ich schmeiße diese Bibliothek einfach raus, weil sie speziell für tief verschachtelte Reaktionszustände entwickelt wurde.

https://github.com/mquan/cortex

Sie können Elemente innerhalb jeder Komponente aktualisieren und sie wird automatisch aktiviert, ohne dass Sie Rückrufe definieren müssen, um das Ereignis weiterzugeben.