首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >问答首页 >根据状态值动态添加类,并根据父对象的状态更改更改子内容

根据状态值动态添加类,并根据父对象的状态更改更改子内容
EN

Stack Overflow用户
提问于 2019-08-21 21:35:25
回答 1查看 66关注 0票数 0

我正在实现一个应用程序的设置页面。对于每个设置,我都实现了一个启用(绿色)或禁用(红色)状态的滑块。但是父对象的设置是只读的,并且是根据其子对象的值进行计算的。

父母也应该是可变的;绿色的父母应该把所有的孩子都变成绿色;红色的父母应该是红色的;但待定的应该是这样的

为此,我对这个切换开关使用了react-multi toggle。

另外,如果我想根据所选的状态动态添加背景颜色,我该怎么做呢?根据react-multi toggle文档知道optionClass会被添加到选定的选项中。现在我想要选定的颜色作为整个容器的颜色。有一个名为"className“的选项买不到附加的类名!

为此,我对这个切换开关使用了react-multi toggle。

有人能帮帮忙吗?

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

EN

回答 1

Stack Overflow用户

回答已采纳

发布于 2019-08-21 23:12:56

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

代码语言:javascript
运行
复制
  // 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
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/57592935

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档