심층 ReactJS 상태 업데이트

Question

양식을 만들기 위해 반복하는 ReactJS 구성 요소 상태에 항목 배열이 있습니다.내 질문은 다음과 같습니다필드가 변경될 때 해당 항목을 가장 잘 업데이트하려면 어떻게 해야 합니까?

예를 들어:

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

이 경우 내 onChange 핸들러는 어떻게 보일까요?내가 바꾸나요? item.baz 그럼 부동산을 직접 this.setState(state)?잘못된 것 같습니다.나는 ~을 보고 있다 불변성 도우미 반응, 그러나 배열 인덱스로 작업하는 방법을 참조하세요.

감사해요.

Answer 1

인덱스를 사용하여 올바른 배열 항목을 전달하여 업데이트할 수 있습니다. onChange ~을 통해 bind 그런 다음 전달할 객체를 동적으로 구축합니다. 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>;
    }
});

이것이 다음과 같은 것보다 장점이 있다는 것을 이해합니다.

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

재정의하려는 경우 shouldComponentUpdate 매번보다 다시 렌더링할 시기를 더 선택적으로 선택하세요. this.setState() 호출됩니다.

jsfiddle

Answer 2

깊이 중첩 된 반응 상태를 위해 특별히 설계 되었으므로이 도서관을 던지기 만하면됩니다.

https://github.com/mquan/cortex

각 구성 요소 내의 항목을 업데이트 할 수 있으며 이벤트를 전달하기 위해 콜백을 정의하지 않아도 자동으로 점차적입니다.