反应事件层次结构问题

每当有人在列属性中更改任何内容时,我只需要在该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 (
          
        );
      });

      return (
        
          {cols}
        
      );
    });

    // 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 (
        
      );
    });

    return (
      
        {rows}
        
          {footerCols}
        
    );
  }
});

在你的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 (
      {props.prop}
    );
  }
});

希望有道理.