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

所以我有一个大的分析页面。在顶部，有一些表单元素可供选择您想要查看报告的内容。在React.js中更改父项的状态

下面是一些图表。

所以我有层次设立这样

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

来源

2015-12-29 fnsjdnfksjdb

控制流程对我来说很合适。

我想你错了是如何引用状态变量。

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

来源

2015-12-29 03:03:35

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

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

回答

相关问题