Question

一开始我想指出的是，我不需要得到一个现成的解决方案。我只需要一些有关如何正确执行此操作的指导。

我有这样的父组件

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

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

有人能告诉我怎么做或给我举例说明吗？

Answer 1

您尝试做的事情有几个问题：

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

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

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

要进一步阅读，请参阅：React docs - Lifting State Up

Answer 2

最好在 parent component 中维护您的 state，并通过 props to the child component 传递 state 和更新函数。

Answer 3

您已经在传递 update 函数，您只需要从 Navbar 的 optionChoose 处理程序中调用它：

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

Answer 4

您需要从导航栏调用 App 中的 changeWindow 函数。您已经将此函数作为名为 update 的 prop 添加到 Navbar 中。

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

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

在 App 中编辑 changeWindow 以接受参数

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

此外，您没有在导航栏中使用状态选项。最好在父组件中有一个状态，这样你就有一个单一的数据源。从 Navbar 中移除 state 并将 state 作为 prop 传递给 Navbar 组件，就像这样

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

将选择元素编辑为此

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

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

4 个答案: