我正在尝试实现一个设置页面，其中我有一个全局设置和某种子设置(以滑块的形式(。
我有以下情况：
1(当所有子设置都打开时，则父切换状态应打开状态
2(当任何子设置关闭时，父切换状态应切换到挂起
3(当所有子设置都关闭时，父母的开关状态应切换到关闭状态
4(同样在单击按钮时，我需要获取所有子组件的当前状态。
尝试了以下方法，但似乎不起作用。为此，我正在为这个切换开关使用反应多切换。
只要你在里面切换，我就能得到状态，但它不会传播到父级
有人可以在这里帮忙吗？
代码沙盒链接 ： https://codesandbox.io/s/react-multi-toggle-r5dpi
App.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}
/>
);
}
}
我让你开始解决你的问题：
https://codesandbox.io/s/react-multi-toggle-5hvs1
问题是...子信息不能传播到 React 中的父级，除非你的应用程序中有一个单一的事实来源，要么使用 Redux 等工具，要么只是本地存储，我不建议这样做。
因此，在这种情况下，您的子组件需要是受控组件。如果父母想了解他们的孩子，他们应该保持他们的状态......
从那里，您可以对父切换进行比较，全部打开或关闭或其他任何内容。
祝你好运。
setChildSwitchValue = value => {
this.setState({ value });
};
这会将 {value： value} 添加到状态并导致此状态：
{parentVal: "", switch1Val: "", switch2Val: "", switch3Val: "", value: "enabled"}