根据 child 组件的数据计算 parents 状态：ReactJS

Question

我正在尝试实现一个设置页面，其中我有一个全局设置和某种 child 设置（以滑块的形式）。

我有以下几种情况：

1)当所有child设置为on时，则parents开关状态应为开启状态

2)当任何child设置关闭时，那么parents开关状态应该切换到pending

3)当child设置全部关闭时，则parents开关状态应切换为关闭状态

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

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

只要你在里面切换，我就能得到状态，但它不会传播到 parent

有人可以帮忙吗？

代码沙箱 Link：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);

Parent 切换


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

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

这会将 {value: value} 添加到状态并导致此状态：

{parentVal: "", switch1Val: "", switch2Val: "", switch3Val: "", value: "enabled"}

Answer 2

我让你开始解决你的问题：

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

问题是... child 信息不能在 React 中传播到 parent 除非你在你的应用程序中有一个单一的真实来源，无论是通过使用 Redux 之类的工具或只是本地存储，我不建议这样做。

因此，在那种情况下，您的 child 组件需要受控。 Parent 如果他们想知道他们的 children...

应该保持他们的状态

从那里您可以比较 parent 全部打开或关闭等等。

祝你好运。

根据 child 组件的数据计算 parents 状态：ReactJS

Compute the parents state based on the data of the child components: ReactJS

javascript

setstate

reactjs

react-hooks

App.tsx

Parent 切换

儿童开关