Javascript Reactjs：如何从子对象更新父对象的状态

我正试图通过子组件通过

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;

在customizer中，通过单击颜色，我想将父项的

设置为
data navbarbg
属性中给定的值

如果我把这段代码放在父jsx文件中，它可以正常工作，但由于某些原因，这些文件应该分开保存

那么，我的代码中缺少了什么？还是整个方法都错了？谢谢。
您可以通过child呼叫家长的
navbchange（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} />

是否有理由在
Customizer
中定义
navbarbgChange

您可以考虑将代码< NavaBbgChchange < /C> >改为<代码> FultFrase。
这样你就能做到

<li><a data-navbarbg="skin1" onClick={this.props.navbarbgChange}></a></li>



这将确保
Fulllayout
的更新背景处于其状态。这也确保了关注点的良好分离，因为
设置
是在父组件中定义的，而不是子组件
在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>
        );
    }
}

类Fulllayout扩展React.Component{
建造师（道具）{
超级（道具）；
此.state={
设置：设置
};
}
//这将传递给子组件
changeForCustomizerState（）{
这是我的国家({
设置：abc
});
}
changeForHeaderState（）{
这是我的国家({
设置：abc
});
}
render（）{
返回(
);
}
}

然后单击子对象，只需从父对象传递的子对象调用父对象方法

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>
        );
    }

render（）{
返回(



);
}
状态更新可以使用回调从父级到子级在父级中完成。检查下面的代码以便更好地理解

完整布局：

 updateState = (skin) => {
     this.setState({
          settings.navbarbg: skin
     });
}

render(){
   return(
      <div>
         <Customizer updateState={this.updateState}
      </div>
   );
}

 updateState = (e) => {
     const skin = e.currentTarget.dataset.navbarbg;
     this.setState({
          settings.navbarbg: skin
     });
}

render(){
   return(
      <div>
         <Customizer updateState={this.updateState}
      </div>
   );
}

或

完整布局：

 updateState = (skin) => {
     this.setState({
          settings.navbarbg: skin
     });
}

render(){
   return(
      <div>
         <Customizer updateState={this.updateState}
      </div>
   );
}

 updateState = (e) => {
     const skin = e.currentTarget.dataset.navbarbg;
     this.setState({
          settings.navbarbg: skin
     });
}

render(){
   return(
      <div>
         <Customizer updateState={this.updateState}
      </div>
   );
}

updateState=（e）=>{
const skin=e.currentTarget.dataset.navbarbg；
这是我的国家({
settings.navbarbg:皮肤
});
}
render（）{
返回(
请不要这样做。这不利于封装。父级会失去对其自身状态的控制。它可能会以难以调试的问题结束。请改用props callback，它们正是为此而引入的。这个答案给了我正确的方法。谢谢。但是，settings.navbarbg:skin给出了一个意外的令牌错误。相反，我使用了immutability helper to使其工作正常。但我有一个问题。如果我想更改sidebarbg和logobg的状态以及其他设置，该怎么办？是否可以仅在一个功能中实现？
 updateState = (e) => {
     const skin = e.currentTarget.dataset.navbarbg;
     this.setState({
          settings.navbarbg: skin
     });
}

render(){
   return(
      <div>
         <Customizer updateState={this.updateState}
      </div>
   );
}

  <li><a data-navbarbg="skin1" onClick={this.props.updateState}></a></li>