Question

我正在为应用程序设置一个设置页面。对于每个设置，我都实现了一个启用（绿色）或禁用（红色）状态的滑块。但是父级的设置是只读的，是根据其子级的值计算的。

父母也应该是多变的；绿色的父母应该把所有的孩子变成绿色;在红色上应该是红色;但是待定应该是这样

为此，我在此切换开关中使用react-multi-toggle。

此外，如果我想根据所选状态动态添加背景色，该如何处理。根据react-multi-toggle文档，知道optionClass已添加到所选选项。现在，我希望将选定的颜色用作整个容器的颜色。有一个名为“ className”的选项，请购买未附加的类名！

为此，我在此切换开关中使用了react-multi-toggle。

有人可以在这里帮忙吗？

代码沙箱：https://codesandbox.io/s/react-multi-toggle-solution-perfect-wrx1w

Answer 1

您可以在Setting Component上的父状态更改时添加切换子状态。查看完整的working sandbox here。关键更改是

  // This function minght not be needed, if your few child switches
  // Just adding it in case you have multiple children
  setChildrenValue = value => {
    // state is immutable, we need clone it.
    const clonedState = JSON.parse(JSON.stringify(this.state));
    for (let key in clonedState) {
      clonedState[key] = value;
    }

    this.setState(
      prevState => ({ ...prevState, ...clonedState }),
      this.handleChange
    );

    /**
         * Use this if your few children and remove code above
         * 
          this.setState(prevState => ({
            ...prevState,
            parentVal: value,
            switch1Val: value,
            switch2Val: value
          }), this.handleChange);
        */
  };

handleParentClick = parentVal => {
  if (parentVal === "pending") {
    this.setState(
      prevState => ({ ...prevState, parentVal }),
      this.handleChange
    );
  } else {
    this.setChildrenValue(parentVal);
  }
};

根据状态值动态添加类，并根据父级的状态更改子级内容

1 个答案: