문제
양식을 만들기 위해 반복하는 ReactJS 구성 요소 상태에 항목 배열이 있습니다.내 질문은 다음과 같습니다필드가 변경될 때 해당 항목을 가장 잘 업데이트하려면 어떻게 해야 합니까?
예를 들어:
var items = this.state.foo.bar.items.map(function(item, i) {
return <input value={item.baz} onChange={??}
});
이 경우 내 onChange 핸들러는 어떻게 보일까요?내가 바꾸나요? item.baz
그럼 부동산을 직접 this.setState(state)
?잘못된 것 같습니다.나는 ~을 보고 있다 불변성 도우미 반응, 그러나 배열 인덱스로 작업하는 방법을 참조하세요.
감사해요.
해결책
인덱스를 사용하여 올바른 배열 항목을 전달하여 업데이트할 수 있습니다. 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()
호출됩니다.
다른 팁
깊이 중첩 된 반응 상태를 위해 특별히 설계 되었으므로이 도서관을 던지기 만하면됩니다.
https://github.com/mquan/cortex
각 구성 요소 내의 항목을 업데이트 할 수 있으며 이벤트를 전달하기 위해 콜백을 정의하지 않아도 자동으로 점차적입니다.
제휴하지 않습니다 StackOverflow