[英]Changing a Parent's State in 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
的状态。
控制流程对我来说似乎正确。
我认为您错了是如何引用状态变量。
在render()
函数中,您引用this.state.range
但在其他地方该变量是dateRange
而不是range
。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.