处理深节点中的状态更改的最佳方法是什么,这也需要由父节点处理.这是我的情况：
<Table>
<Row prop={user1}>
<Column prop={user1_col1} />
<Column prop={user1_col2} />
</Row>
<Row prop={user2}>
<Column prop={user2_col1} />
<Column prop={user2_col2} />
</Row>
<TableFooter>
<FooterColumn prop={sum1} />
<FooterColumn prop={sum2} />
</TableFooter>
</Table>
每当有人在列属性中更改任何内容时,我只需要在该Column组件中维护此值的状态.但是,我现在想要FooterColumn组件中的这些值的总和.实现这一目标的最佳方法是什么？
如果我要放弃状态改变,我必须将状态保存在多个地方,然后将其传递下去,这是一项繁琐的工作.是最好使用EventEmitters还是我错过了什么？
解决方法
因此,您只需要跟踪父组件中的状态,并与子组件共享状态更新功能：
var Parent = React.createClass({
getInitialState: function() {
return {
users: [
{name: 'Matt',values: [1,2]},{name: 'user517153',values: [4,5]}
]
};
},updateValue: function(rowId,colId,newValue) {
var newUseRSState = this.state;
newUseRSState.users[rowId].values[colId] = newValue;
this.setState({users: newUseRSState});
},render: function() {
var rows = this.state.users.map(function(user,r) {
var cols = user.values.map(function(value,c) {
return (
<Column key={c} prop={value} rowId={r} colId={c} onChange={this.updateValue}/>
);
});
return (
<Row key={r} prop={user}>
{cols}
</Row>
);
});
// Yes,it could be more efficient if you did it all in one map/forEach - doing this in a second one for clarity
var footerCols = this.state.users.map(function(user) {
var sum = 0;
user.values.forEach(function(value) { sum+= value; });
return (
<FooterColumn prop={sum} />
);
});
return (
<Table>
{rows}
<TableFooter>
{footerCols}
</TableFooter>
</Table>
);
}
});
在Column类中,您只需要以下内容：
var Column = React.createClass({
onChange: function(event) {
var props = this.props;
var newValue = event.target.value; // Get the new value somehow - this is just an example
props.onChange(props.rowId,props.coldId,newValue);
},render: function() {
var props = this.props;
return (
<td onChange={this.onChnage}>{props.prop}</td>
);
}
});
希望有道理.
