gpt4 book ai didi

javascript - 在 React.js 中更改父级的状态

转载 作者:行者123 更新时间:2023-11-28 18:50:46 25 4
gpt4 key购买 nike

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

下面是一些图表。

所以我的层次结构设置如下:

Page
Otherstuff1
Report
Setting1
Setting2
Graph1
Graph2
Table
Otherstuff2

我认为此报告的状态应该保存在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.

关于javascript - 在 React.js 中更改父级的状态,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/34503705/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com