![](/img/trans.png)
[英]How to update a parent's component state from a child component in Reactjs
[英]Reactjs: how to update state of parent from child
我正在尝试通过setState
通过子组件更新父组件的状态。 以下是我的父组件:
Fulllayout
import React from 'react';
import { Route, Switch, Redirect } from 'react-router-dom';
import Header from '../components/header/header.jsx';
import Customizer from '../components/customizer/customizer';
import { Navbar, NavbarBrand, Collapse } from 'reactstrap';
export const settings = {
navbarbg: 'skin1',
sidebarbg: 'skin6',
logobg: 'skin6'
}
class Fulllayout extends React.Component {
constructor(props) {
super(props);
this.state = {
settings: settings
};
}
render() {
return (
<div id="main-wrapper">
<header data-navbarbg={this.state.settings.navbarbg}>
<Navbar expand="md" className={}></Navbar>
</header>
<div className="page-wrapper d-block"></div>
<Customizer />
</div>
);
}
}
export default Fulllayout;
在父母,我已经定义了一个常量设置导出。 它也在this.state
给出。 在标头中,有一个属性data-navbarbg={this.state.settings.navbarbg}
。
我想动态更改其值。 因此,我有一个定制器,它作为孩子在父级中导入。 以下是子组件:
定制
import React from 'react';
import { settings } from '../../layouts/fulllayout';
import update from 'immutability-helper';
class Customizer extends React.Component {
constructor(props) {
super(props);
this.navbarbgChange = this.navbarbgChange.bind(this);
this.state = {
settings: settings
};
}
navbarbgChange(e) {
var skin = e.currentTarget.dataset.navbarbg;
var abc = update(this.state.settings, {
navbarbg: { $set: skin }
});
this.setState({ settings: abc });
}
render() {
return (
<aside className="customizer" id="customizer">
<a className="service-panel-toggle text-white"></a>
<div className="customizer-body pt-3">
<div className="mt-3 border-bottom px-3">
<ul className="theme-color mb-2">
<li><a data-navbarbg="skin1" onClick={this.navbarbgChange}></a></li>
</ul>
</div>
</div>
</aside>
);
}
}
export default Customizer;
从定制,通过点击颜色,我想setState
家长在给定的值data-navbarbg
属性。
如果我将此代码放在父jsx文件中,则可以正常工作,但由于某些原因,应将此文件分隔开。
那么,我的代码中缺少什么呢? 还是整个方法是错误的? 谢谢。
是否有navbarbgChange
在Customizer
中Customizer
navbarbgChange
?
您可以考虑将navbarbgChange
移至Fulllayout
。
这样你就可以
<li><a data-navbarbg="skin1" onClick={this.props.navbarbgChange}></a></li>
这将确保Fulllayout
在其状态下具有更新的背景。 由于settings
是在父组件而不是子组件中定义的,因此这也确保了关注点之间的良好分离
在react中,您始终可以将方法从父级传递到子级。 让我们在父级中编写方法,以像这样从子级更改父级的状态。
class Fulllayout extends React.Component {
constructor(props) {
super(props);
this.state = {
settings: settings
};
}
// This will be passed to the child component
changeForCustomizerState() {
this.setState({
settings: abc
});
}
changeForHeaderState() {
this.setState({
settings: abc
});
}
render() {
return (
<div id="main-wrapper">
<header chageNavbarbg={this.changeForHeaderState}>
<Navbar expand="md" className={}></Navbar>
</header>
<div className="page-wrapper d-block"></div>
<Customizer chageNavbarbg={this.changeForCustomizerState} />
</div>
);
}
}
然后onChild上的onClick只需从父级传递的子级调用父级方法。
render() {
return (
<aside className="customizer" id="customizer">
<a className="service-panel-toggle text-white"></a>
<div className="customizer-body pt-3">
<div className="mt-3 border-bottom px-3">
<ul className="theme-color mb-2">
<li><a data-navbarbg="skin1" onClick={this.props.chageNavbarbg}></a></li>
</ul>
</div>
</div>
</aside>
);
}
可以使用回调在子级父级中完成状态更新。 检查下面的代码以更好地理解
Fulllayout:
updateState = (skin) => {
this.setState({
settings.navbarbg: skin
});
}
render(){
return(
<div>
<Customizer updateState={this.updateState}
</div>
);
}
在您的定制器中
navbarbgChange(e){
const skin = e.currentTarget.dataset.navbarbg;
this.props.updateState(skin);
}
要么
Fulllayout:
updateState = (e) => {
const skin = e.currentTarget.dataset.navbarbg;
this.setState({
settings.navbarbg: skin
});
}
render(){
return(
<div>
<Customizer updateState={this.updateState}
</div>
);
}
定制程序:直接将父函数传递给onClick
<li><a data-navbarbg="skin1" onClick={this.props.updateState}></a></li>
还要停止使用var,并主要开始使用let和const。 ECMASCRIPT本身主张避免使用var,因为其窗口范围大。
您可以从子级调用父级的navbarbgChange(e)
。
在父母中:
navbarbgChange(e) {
var skin = e.currentTarget.dataset.navbarbg;
var abc = update(this.state.settings, {
navbarbg: { $set: skin }
});
this.setState({ settings: abc });
}
<Child parentNavbarbgChange={navbarbgChange} />
在navbarbgChange
子调用中:
this.props.parentNavbarbgChange(e);
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.