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以听取更改，然后通过将数据作为道具传递给孩子来重新渲染整个树）。看起来很肮脏，但... –