根据子组件的数据计算父状态:ReactJS [英] Compute the parents state based on the data of the child components: ReactJS

问题描述

我正在尝试实现一个设置页面，其中有一个全局设置和某种子设置(以滑块的形式).

我有以下场景:

1)当所有子设置都打开时，则父母开关状态应为打开状态

2)当任何子设置关闭时，父开关状态应切换为待定

3)当所有子设置都关闭时，父开关状态应该切换到关闭状态

4) 同样在单击按钮时，我需要获取所有子组件的当前状态.

尝试了以下方法，但似乎不起作用.为此，我为此切换开关使用了 react-multi-toggle.

每当您在内部切换时，我都可以获得状态，但它不会传播给父级

有人可以帮忙吗?

代码沙盒链接:https://codesandbox.io/s/react-multi-toggle-r5dpi

App.tsx

从react"导入React；从react-dom"导入 ReactDOM；从./ChildSwitch"导入 ChildSwitch；从./ParentSwitch"导入ParentSwitch；导入./styles.css"；导出默认类 App 扩展 React.Component {构造函数(道具){超级(道具)；this.state = {父值:"",switch1Val: "",switch2Val: "",switch3Val: ""};}onGetChildSwitchValues = () =>{控制台日志(这个状态)；};setChildSwitchValue = 值 =>{this.setState({值});};setParentSwitchValue = 值 =>{this.setState({值});};使成为() {const { parentVal, switch1Val, switch2Val, switch3Val } = this.state;返回 (<>父开关:{" "}<父开关parentSwitch={parentVal}onSelect={this.setParentSwitchValue}/>子开关:<ChildSwitchchildSwitch={switch1Val}onSelect={this.setChildSwitchValue}/><ChildSwitchchildSwitch={switch2Val}onSelect={this.setChildSwitchValue}/><ChildSwitchchildSwitch={switch3Val}onSelect={this.setChildSwitchValue}/><button onClick={this.onGetChildSwitchValues}>获取子值</button></>);}}const rootElement = document.getElementById("root");ReactDOM.render(, rootElement);

父切换

<预><代码>从react-multi-toggle"导入 MultiToggle；从反应"导入反应；导入react-multi-toggle/style.css"；导出默认类 ParentSwitch 扩展 React.Component {构造函数(道具){超级(道具)；this.state = {选项: [{displayName: "已禁用",值:禁用"，选项类:红色"},{displayName: "待定",值:待定"，optionClass:灰色"},{displayName: "已启用",值:启用"，optionClass:绿色"}],选择:待定"};}使成为() {const { 选项，选中 } = this.state;返回 (<多重切换选项={选项}selectedOption={selected}onSelectOption={() =>{}}/>);}}

子开关

<预><代码>从react-multi-toggle"导入 MultiToggle；从反应"导入反应；导出默认类 ChildSwitch 扩展 React.Component {构造函数(道具){超级(道具)；this.state = {选项: [{displayName: "已禁用",值:禁用"，选项类:红色"},{displayName: "已启用",值:启用"，optionClass:绿色"}],选择:已禁用"};}onSelectOption = 选择 =>this.setState({ 选中 }, () => {this.props.onSelect(this.state.selected);});使成为() {控制台日志(this.state.selected)；const { 选项，选中 } = this.state;返回 (<多重切换选项={选项}selectedOption={selected}onSelectOption={this.onSelectOption}/>);}}

解决方案

setChildSwitchValue = value =>{this.setState({值});};

这将 {value: value} 添加到状态并导致此状态:

{parentVal: "", switch1Val: "", switch2Val: "", switch3Val: "", value: "enabled"}

I am trying to implement a settings page where I have a global settings and some kind of child settings(in form of a slider).

I have the following scenarios:

1)When all of the child settings is on , then parents switch state should be turned on state

2)When any of the child settings is off, then parents switch state should be switched to pending

3)When all of the child settings is off, then parents switch state should be switched to off state

4) Also On click of button, I need to get the current state of all the child components.

Have tried the following approach but it does not seem like working. For this , I am using react-multi-toggle for this toggle switch.

I am able to get the state whenever the you do toggling inside, but it is not propagating to parent

Can someone help here ?

Code Sandbox Link : 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);

Parent Switch

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={() => {}}
      />
    );
  }
}

ChildSwitch

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}
      />
    );
  }
}

解决方案

setChildSwitchValue = value => {
    this.setState({ value });
};

this adds {value: value} to the state and results in this state:

{parentVal: "", switch1Val: "", switch2Val: "", switch3Val: "", value: "enabled"}

这篇关于根据子组件的数据计算父状态:ReactJS的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！