时间戳

首页 > 解决方案 > 根据子组件的数据计算父状态：ReactJS

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

问题描述

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

我有以下场景：

1）当所有子设置都开启时，父母切换状态应为开启状态

2）当任何一个子设置关闭时，父母切换状态应切换为待处理

3）当所有子设置都关闭时，父母切换状态应切换到关闭状态

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

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

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

有人可以帮忙吗？

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

应用程序.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}
      />
    );
  }
}

标签： javascriptreactjsreact-hookssetstate

解决方案

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

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

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

所以在这种情况下，你的子组件需要被控制。如果父母想要了解他们的孩子，他们应该保持他们的状态......

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

祝你好运。

推荐阅读