在React.js中更改父狀態

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 。