0
在React中將表單值從孩子傳遞迴父類的一種好方法是什麼？在React中傳遞父類和子類之間的表單狀態
比方說，我們有下面的例子：
var Parent = React.createClass({
render: function() {
<Child data={this.state.data[this.state.currentChild]}/>
},
getInitialState : function() {
return {
data: [{
field1: 'Text',
field2: 'Text2'
}],
currentChild: 0
}
}
});
var Child = React.createClass({
render: function() {
<div>
<input name="field1" value={this.props.data.field1} onChange={this.passBackChanges}/>
<input name="field2" value={this.props.data.field2} onChange={this.passBackChanges}/>
</div>
},
passBackChanges: function() {
}
});我試圖在onChange處理程序通過從父（這觸發對passBackChanges並依次更新家長的狀態然而，當在Parent（改變currentChild指數）之間交替出現不同的孩子，這些變化似乎沒有反映出來。
var Parent = React.createClass({
render: function() {
<Child data={this.state.data[this.state.currentChild]} onChange={this.updateState}/>
},
getInitialState : function() {
return {
data: [{
field1: 'Text',
field2: 'Text2'
}],
currentChild: 0
}
},
updateState: function (state) {
this.state.data[this.state.currentChild] = state;
this.setState({
data: this.state.data
})
}
});
var Child = React.createClass({
render: function() {
<div>
<input ref="field1" value={this.props.data.field1} onChange={this.passBackChanges}/>
<input ref="field2" value={this.props.data.field2} onChange={this.passBackChanges}/>
</div>
},
passBackChanges: function() {
this.props.onChange({
field1: this.refs.field1.getDOMNode().value,
field2: this.refs.field2.getDOMNode().value
});
}
});
居然發現在我的原代碼一個錯字。看起來，我給出的例子看起來似乎起作用了（將父數據傳遞給Child以聽取更改，然後通過將數據作爲道具傳遞給孩子來重新渲染整個樹）。看起來很骯髒，但... –