在 React.js 中更改父母的状态

Posted 2023-02-22

【中文标题】在 React.js 中更改父母的状态

【英文标题】：Changing a Parent's State in React.js

【发布时间】：2016-04-02 21:41:43

【问题描述】：

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

下面是一些图表。

所以我有这样的层次结构：

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 的状态。

【参考方案1】：

控制流在我看来是正确的。

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

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

【讨论】：

哇，感谢您注意到这一点。我在这里，对 React 还没有信心，认为我错过了一些巨大的概念。但就是这样！非常感谢。