Javascript 以父组件内对象的形式从所有子组件获取整合数据：React JS

我正在为一个应用程序实现一个设置页面。对于每个设置，我都实现了一个具有enabledgreen或DisabledReed状态的滑块。但父项的设置是只读的，并根据其子项的值进行计算

父项的设置派生如下：如果所有子项都是红色，则父项保持红色；如果全部为绿色，则父项保持绿色；如果至少有一个子项为绿色，则父项保持灰色

这些设置按如下方式分组：

父功能1：只读切换

 Setting 1   (Toggle)

 Setting 2   (Toggle)

Setting 1   (Toggle)

Setting 2   (Toggle)

父功能2：只读切换

 Setting 1   (Toggle)

 Setting 2   (Toggle)

Setting 1   (Toggle)

Setting 2   (Toggle)

最后还有一个按钮，它给了我一个所有家长和孩子的综合值。但到目前为止，我只能与一位家长和两个孩子相处

是否有人可以帮助您在一个位置获得所有设置的合并值，如配置所有这些设置的超级父组件

为此，我使用react multi-toggle作为切换开关

非常感谢您的帮助

代码沙盒：

应用程序 生育 父设置

---

把你所有的州都放到一个单一的州里

然后，您将把整个事件包装到这样的上下文中：

<SettingsContext.Provider>
  <App/>
</SettingsContext.Provider>

---

现在您可以访问任何子级、父级等中的状态。但是，我建议不要将禁用、启用等存储为字符串，而是将状态存储为{enabled:true，pending:false}

我建议您将子级和父级分组到一个组件下。假设我们将其命名为设置。然后，我们创建另一个组件，该组件将呈现设置列表和按钮。最后一个组件将保存所有设置的值。最后，每次设置组件的值更改时，我们都会更新列表。检验样品

应用程序组件

设置组件

---

这里有一个片段非常有用：如果我必须从API获取所有这些开关的值，那么它可能是从mineNow派生的沙盒，此API调用将写入何处？您可以在应用程序组件上实现componentDidMount，并在那里获取您的开关值。是的，您需要将Component State的初始值设置为从API获取的值。

const SettingsContext = createContext({state1, state2/* all your states in here*/);

<SettingsContext.Provider>
  <App/>
</SettingsContext.Provider>

export default class App extends PureComponent {
  state = {};

  onSettingChange = (settingId, setting) => {
    this.setState(prevState => ({
      ...prevState,
      [settingId]: setting
    }));
  };

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

  render() {
    return (
      <Fragment>
        <Setting id="setting1" onChange={this.onSettingChange} />
        <Setting id="setting2" onChange={this.onSettingChange} />
        <button onClick={this.onGetSettingValues}>Get All Values</button>
      </Fragment>
    );
  }
}

import React, { PureComponent, Fragment } from "react";
import ChildSwitch from "./ChildSwitch";
import ParentSwitch from "./ParentSwitch";

export default class Setting extends PureComponent {
  state = {
    parentVal: "disabled",
    switch1Val: "enabled",
    switch2Val: "disabled"
  };

  componentDidMount() {
    this.setParentSwitchValue();
  }

  setChildSwitchValue = (whichSwitch, selected) => {
    this.setState(
      prevState => ({ ...prevState, [whichSwitch]: selected }),
      this.setParentSwitchValue
    );
  };

  handleChange = () => {
    const { id, onChange } = this.props;
    onChange(id, this.state);
  };

  setParentSwitchValue = () => {
    const { switch1Val, switch2Val } = this.state;
    const switchStates = [switch1Val, switch2Val];
    let parent = "pending";
    if (switchStates.every(val => val === "enabled")) {
      parent = "enabled";
    }
    if (switchStates.every(val => val === "disabled")) {
      parent = "disabled";
    }

    this.setState(
      prevState => ({ ...prevState, parentVal: parent }),
      this.handleChange
    );
  };

  render() {
    const { parentVal, switch1Val, switch2Val } = this.state;
    return (
      <Fragment>
        <div className="boxed">
          Parent Setting 1
          <ParentSwitch
            parentSwitch={parentVal}
            onSelect={this.setParentSwitchValue}
          />
          Setting 1:
          <ChildSwitch
            switchName={"switch1Val"}
            selected={switch1Val}
            onSelect={this.setChildSwitchValue}
          />
          Setting 2:
          <ChildSwitch
            switchName={"switch2Val"}
            selected={switch2Val}
            onSelect={this.setChildSwitchValue}
          />
        </div>
      </Fragment>
    );
  }
}