javascript - 根据子组件的数据计算父组件的状态 : ReactJS

Question

我正在尝试实现一个设置页面，其中有全局设置和某种子设置(以 slider 的形式)。

我有以下场景:

1)当所有子设置都打开时，则父开关状态应为打开状态

2)当任何子设置关闭时，父级开关状态应切换为待处理

3)当所有子设置都关闭时，则父开关状态应切换为关闭状态

4)另外，单击按钮时，我需要获取所有子组件的当前状态。

已尝试以下方法，但似乎不起作用。为此，我使用react-multi-toggle作为这个切换开关。

每当您在内部进行切换时，我都能够获取状态，但它不会传播到父级

有人可以帮忙吗？

代码沙箱链接:https://codesandbox.io/s/react-multi-toggle-r5dpi

App.tsx

import React from "react";
import ReactDOM from "react-dom";
import ChildSwitch from "./ChildSwitch";
import ParentSwitch from "./ParentSwitch";
import "./styles.css";

export default class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      parentVal: "",
      switch1Val: "",
      switch2Val: "",
      switch3Val: ""
    };
  }

  onGetChildSwitchValues = () => {
    console.log(this.state);
  };

  setChildSwitchValue = value => {
    this.setState({ value });
  };

  setParentSwitchValue = value => {
    this.setState({ value });
  };

  render() {
    const { parentVal, switch1Val, switch2Val, switch3Val } = this.state;
    return (
      <>
        Parent Switch :{" "}
        <ParentSwitch
          parentSwitch={parentVal}
          onSelect={this.setParentSwitchValue}
        />
        Child Switches :
        <ChildSwitch
          childSwitch={switch1Val}
          onSelect={this.setChildSwitchValue}
        />
        <ChildSwitch
          childSwitch={switch2Val}
          onSelect={this.setChildSwitchValue}
        />
        <ChildSwitch
          childSwitch={switch3Val}
          onSelect={this.setChildSwitchValue}
        />
        <button onClick={this.onGetChildSwitchValues}>Get Child Values</button>
      </>
    );
  }
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

父级切换

import MultiToggle from "react-multi-toggle";
import React from "react";
import "react-multi-toggle/style.css";

export default class ParentSwitch extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      options: [
        {
          displayName: "Disabled",
          value: "disabled",
          optionClass: "red"
        },
        {
          displayName: "Pending",
          value: "pending",
          optionClass: "grey"
        },
        {
          displayName: "Enabled",
          value: "enabled",
          optionClass: "green"
        }
      ],
      selected: "pending"
    };
  }

  render() {
    const { options, selected } = this.state;
    return (
      <MultiToggle
        options={options}
        selectedOption={selected}
        onSelectOption={() => {}}
      />
    );
  }
}

子开关

import MultiToggle from "react-multi-toggle";
import React from "react";

export default class ChildSwitch extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      options: [
        {
          displayName: "Disabled",
          value: "disabled",
          optionClass: "red"
        },
        {
          displayName: "Enabled",
          value: "enabled",
          optionClass: "green"
        }
      ],
      selected: "disabled"
    };
  }

  onSelectOption = selected =>
    this.setState({ selected }, () => {
      this.props.onSelect(this.state.selected);
    });

  render() {
    console.log(this.state.selected);
    const { options, selected } = this.state;
    return (
      <MultiToggle
        options={options}
        selectedOption={selected}
        onSelectOption={this.onSelectOption}
      />
    );
  }
}

Answer 1

我帮助您开始解决问题:

https://codesandbox.io/s/react-multi-toggle-5hvs1

问题是...子信息无法在 React 中传播到父级，除非您在应用程序中通过使用 Redux 等工具或仅使用本地存储来拥有单一事实来源，但我不建议这样做。

因此，在这种情况下，您的子组件需要是受控组件。如果 parent 想了解自己的 child ，就应该保持自己的状态......

从那里您可以对父级切换进行比较，全部打开或关闭或其他任何操作。

祝你好运。