Actualizando el estado profundo de ReactJS

Question

Tengo una serie de elementos en el estado de un componente de ReactJS sobre los que estoy iterando para crear un formulario.Mi pregunta es:¿Cuál es la mejor manera de actualizar esos elementos cuando cambian los campos?

Por ejemplo:

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

¿Cómo se vería mi controlador onChange en este caso?¿Cambio el item.baz propiedad directamente, entonces this.setState(state)?Parece incorrecto.estoy mirando el Reaccionar ayudantes de inmutabilidad, pero vea cómo trabajar con índices de matriz.

Gracias.

Answer 1

Puede usar el índice para actualizar el elemento de matriz correcto pasándolo a onChange a través de bind y luego construir dinámicamente el objeto para pasarlo 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>;
    }
});

Tengo entendido que esto sólo tiene una ventaja sobre algo como

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

si vas a anular shouldComponentUpdate y ser más selectivo sobre cuándo volver a renderizar que cada vez this.setState() se llama.

jsfiddle

Answer 2

Pensé en lanzar esta biblioteca porque fue diseñada específicamente para estados de reacción profundamente anidados,

https://github.com/mquan/cortex

Puede actualizar elementos dentro de cada componente y se activa automáticamente sin tener que definir devoluciones de llamada para pasar el evento.