在 React.js 中更改 Parent 的状态

Question

我有一个很大的分析页面。在顶部，有一些表单元素可以选择您希望查看报告的内容。

下面是一些图表。

所以我的层次结构是这样设置的：

Page
    Otherstuff1
    Report
        Setting1 
        Setting2
        Graph1
        Graph2
        Table
    Otherstuff2

我认为这份报告的 state 应该放在 Report 组件中，因为它是包含需要访问此状态的所有内容的最低组件。

那么当 Setting1 发生变化时如何更新 Report 的状态？

这是我的代码的简化版本，与问题相关。

var Report = React.createClass({

  getInitialState: function() {
    return {
      dateRange: "not changed",
    }
  },
  
  changeDateRange: function(event) {
    console.log("changed");
    this.setState({dateRange: "changed"});
  },

  render: function() {
    return (
      <div>
        <ReportDateRange change={this.changeDateRange}/>
        {this.state.range}
      </div>
    );
  }

});

var ReportDateRange = React.createClass({
  render: function() {
    return (
      <select className="form-control" id="historicalRange"
          onChange={this.props.change}>
        <option value="yesterday">Yesterday</option>
        <option value="week">Last week</option>
        <option value="fortnight">Last fortnight</option>
        <option value="month" selected>This month</option>
      </select>
    )
  }
});

此代码运行，它确实在控制台中记录了某些更改，但它不会更新 Report 的状态。我认为它可能正在更新 ReportDateRange 的状态。

Answer 1

我觉得控制流程很合适。

我认为你的错误在于你引用状态变量的方式。

在您的 render() 函数中您引用了 this.state.range 但在其他地方该变量是 dateRange 而不是 range.

在 React.js 中更改 Parent 的状态

Changing a Parent's State in React.js

javascript

state

flux

dom-events

reactjs