Javascript 如何将父回调设置为子状态

首先，我想指出，我不需要现成的解决方案。我只是需要一些关于如何正确做的指导

我有这样的父组件

import React from "react";
import Navbar from "./components/Navigation.js";
import Start from "./components/Start.js";
import Generator from "./components/Generator.js";
import Footer from "./components/Footer.js";
import './App.css';

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      window: 'start'
    };

    this.changeWindow = this.changeWindow.bind(this)
  }

  changeWindow() {
    this.setState({window: ''});
  }

  render() {
    return (
      <>
        <Navbar update={this.changeWindow} />
        {this.state.window == 'start' ? (
        <Start />
        ) : (
        <Generator />
        )}
        <Footer />
      </>
    )
  }
}

export default App;

import React from "react";
import "./Navigation.css";

class Navbar extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
        option: 'start'
    }
}

optionChoose = event => {
    this.setState({
        option: event.target.value
    })
}

render() {
    return (
        <>
            <nav className="navbar">
                <div className="class-select">
                    <select onChange={this.optionChoose}>
                        <option value="start">Wybierz klasę postaci</option>
                        <option value="bb">Barbarzyńca</option>
                        <option value="ryc">Rycerz</option>
                        <option value="sh">Sheed</option>
                        <option value="dr">Druid</option>
                        <option value="mo">Mag Ognia</option>
                        <option value="uk">Łucznik</option>
                        <option value="vd">VooDoo</option>
                    </select>
                    <span className="arrow"></span>
                </div>
            </nav>
        </>
        )
    }
}

export default Navbar

    <Navbar option={this.state.window} update={this.changeWindow} />

从“React”导入React；
从“/components/Navigation.js”导入导航栏；
从“/components/Start.js”导入开始；
从“/components/Generator.js”导入生成器；
从“/components/Footer.js”导入页脚；
导入“/App.css”；
类应用程序扩展了React.Component{
建造师（道具）{
超级（道具）；
此.state={
窗口：“开始”
};
this.changeWindow=this.changeWindow.bind（this）
}
更改窗口（）{
this.setState（{window:'}）；
}
render（）{
返回(
{this.state.window=='start'(
) : (
)}
)
}
}
导出默认应用程序；

还有像这样的子组件

import React from "react";
import Navbar from "./components/Navigation.js";
import Start from "./components/Start.js";
import Generator from "./components/Generator.js";
import Footer from "./components/Footer.js";
import './App.css';

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      window: 'start'
    };

    this.changeWindow = this.changeWindow.bind(this)
  }

  changeWindow() {
    this.setState({window: ''});
  }

  render() {
    return (
      <>
        <Navbar update={this.changeWindow} />
        {this.state.window == 'start' ? (
        <Start />
        ) : (
        <Generator />
        )}
        <Footer />
      </>
    )
  }
}

export default App;

import React from "react";
import "./Navigation.css";

class Navbar extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
        option: 'start'
    }
}

optionChoose = event => {
    this.setState({
        option: event.target.value
    })
}

render() {
    return (
        <>
            <nav className="navbar">
                <div className="class-select">
                    <select onChange={this.optionChoose}>
                        <option value="start">Wybierz klasę postaci</option>
                        <option value="bb">Barbarzyńca</option>
                        <option value="ryc">Rycerz</option>
                        <option value="sh">Sheed</option>
                        <option value="dr">Druid</option>
                        <option value="mo">Mag Ognia</option>
                        <option value="uk">Łucznik</option>
                        <option value="vd">VooDoo</option>
                    </select>
                    <span className="arrow"></span>
                </div>
            </nav>
        </>
        )
    }
}

export default Navbar

    <Navbar option={this.state.window} update={this.changeWindow} />

从“React”导入React；
导入“/Navigation.css”；
类Navbar扩展了React.Component{
建造师（道具）{
超级（道具）；
此.state={
选项：“开始”
}
}
optionChoose=事件=>{
这是我的国家({
选项：event.target.value
})
}
render（）{
返回(
威比尔兹·克拉斯·波斯塔奇
巴巴拉钦卡
瑞塞兹
希德
德鲁伊
麦格奥尼亚酒店
乌兹尼克
伏都教
)
}
}
导出默认导航栏

我的假设是，用户在子组件中选择一个选项，并且该选项的值设置为state。稍后，父组件回调子组件，获取其状态，并将其设置为自己的状态

---

有人能告诉我怎么做或者给我举个例子吗？

最好在

父组件中保持状态，并通过
道具将状态和更新功能传递给子组件
您已经在传递
更新
功能了，您只需从
Navbar
的
选项选择处理程序调用它：

optionChoose = event => {
    this.setState({
        option: event.target.value
    })
    this.props.update(); // maybe event.target.value as a parameter
}

您尝试执行的操作有两个问题：


在React中，数据流是向下的，而不是相反的方向。父组件无法访问子组件的状态，但子组件可以从其父组件接收一些数据作为道具
即使父组件可以访问其子组件的状态，也可以先更新子组件中的状态，然后该状态将在父组件中重复。当父组件和子组件可以共享相同的状态时，不要复制该状态

要解决您的问题，请将状态保留在父组件中，将回调函数传递给将在父组件中设置状态的子组件。当在子组件中选择任何选项时，调用作为道具传递给子组件的回调函数

当父组件的状态将被更新时，它也将触发子组件的重新渲染

如需进一步阅读，请参阅：
您需要从导航栏调用应用程序中的函数更改窗口。您已经将此函数作为名为update的道具添加到导航栏中

在导航栏编辑选项中选择此选项

optionChoose = event => {
    update(event.target.value;
}

应用程序内编辑更改窗口以接受参数

changeWindow(newValue) {
    this.setState({window: newValue});
  }

此外，您没有在导航栏中使用状态选项。最好在父组件中有一个状态，这样您就有了一个数据源。从导航栏中删除状态，并将状态作为道具传递到导航栏组件，如下所示

import React from "react";
import Navbar from "./components/Navigation.js";
import Start from "./components/Start.js";
import Generator from "./components/Generator.js";
import Footer from "./components/Footer.js";
import './App.css';

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      window: 'start'
    };

    this.changeWindow = this.changeWindow.bind(this)
  }

  changeWindow() {
    this.setState({window: ''});
  }

  render() {
    return (
      <>
        <Navbar update={this.changeWindow} />
        {this.state.window == 'start' ? (
        <Start />
        ) : (
        <Generator />
        )}
        <Footer />
      </>
    )
  }
}

export default App;

import React from "react";
import "./Navigation.css";

class Navbar extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
        option: 'start'
    }
}

optionChoose = event => {
    this.setState({
        option: event.target.value
    })
}

render() {
    return (
        <>
            <nav className="navbar">
                <div className="class-select">
                    <select onChange={this.optionChoose}>
                        <option value="start">Wybierz klasę postaci</option>
                        <option value="bb">Barbarzyńca</option>
                        <option value="ryc">Rycerz</option>
                        <option value="sh">Sheed</option>
                        <option value="dr">Druid</option>
                        <option value="mo">Mag Ognia</option>
                        <option value="uk">Łucznik</option>
                        <option value="vd">VooDoo</option>
                    </select>
                    <span className="arrow"></span>
                </div>
            </nav>
        </>
        )
    }
}

export default Navbar

    <Navbar option={this.state.window} update={this.changeWindow} />



将“选择”元素编辑为此

<select value={this.props.option} onChange={this.optionChoose}>


u可以向childcomponent传递一个函数，该函数设置父组件中的状态。只需在此处进行一些说明。如果从下拉列表中选择一个选项，该选项将设置为父组件状态下的窗口属性值？@RajatJain我希望子组件使用菜单选项中的值设置其状态。然后父组件调用子组件，获取子状态并将其设置为其状态。