我正在实现一个应用程序的设置页面。对于每个设置,我都实现了一个启用(绿色)或禁用(红色)状态的滑块。但是父对象的设置是只读的,并且是根据其子对象的值进行计算的。
父母也应该是可变的;绿色的父母应该把所有的孩子都变成绿色;红色的父母应该是红色的;但待定的应该是这样的
为此,我对这个切换开关使用了react-multi toggle。
另外,如果我想根据所选的状态动态添加背景颜色,我该怎么做呢?根据react-multi toggle文档知道optionClass会被添加到选定的选项中。现在我想要选定的颜色作为整个容器的颜色。有一个名为"className“的选项买不到附加的类名!
为此,我对这个切换开关使用了react-multi toggle。
有人能帮帮忙吗?
代码沙箱:https://codesandbox.io/s/react-multi-toggle-solution-perfect-wrx1w
发布于 2019-08-21 15:12:56
您可以在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);
}
};
https://stackoverflow.com/questions/57592935
复制