Question

我有一个数据列表，我使用地图功能在前端显示了这些数据。每个数据都有一个切换按钮。如果用户单击某个特定内容，它将显示有关以下数据的说明。现在，如果我使用静态数据。开关工作正常。但是所有这些都同时被选中。当我单击特定的一个时，我只希望特定的一个被选择。我正在为交换机使用react-switch库。下面是我的代码，请进行Pleasse检查，让我知道我如何实现这一目标。

/***Parent Component***/

import React, { Component } from "react";
import ReqLists from "./ReqLists";

class Requirements extends Component {
  constructor(props) {
    super(props);
    this.state = {
      reqs: [
        {
          id: 0,
          name: "Application",
          details: "Do you require an application from volunteers?"
        },
        { id: 1, name: "Screening Questions", details: "", description: "Dummy content" },
        {
          id: 2,
          name: "Recurring commitment",
          details:
            "Does this opportunity require a recurring commitment from volunteers?", description: "Dummy content"
        },
        { id: 3, name: "Documents for volunteers to upload ", details: "", description: "Dummy content" },
        { id: 4, name: "Waiver & Release of Liability Forms", details: "", description: "Dummy content"  },
        { id: 5, name: "Parental Consent & Medical Form", details: "", description: "Dummy content"  },
        { id: 6, name: "Age", details: "", description: "Dummy content"  },
        { id: 7, name: "Certifications", details: "", description: "Dummy content"  },
        { id: 8, name: "Languages", details: "", description: "Dummy content"  },
        { id: 9, name: "Skils", details: "", description: "Dummy content"  },
        { id: 10, name: "Additional Requirements", details: "", description: "Dummy content"  },
        { id: 11, name: "Additional Details", details: "", description: "Dummy content"  }
      ],
      checked: 0
    };
  }
  handleChange = id => {
    const checked = this.state.checked;
    checked[id] = checked.hasOwnProperty(id) ? !checked[id] : true;
    this.setState({ checked });
  };

  render() {
    return (
      <div style={{ width: "100%" }}>
        <ReqLists
          lists={this.state.reqs}
          onChange={this.handleChange}
          checked={this.state.checked}
        />
      </div>
    );
  }
}

export default Requirements;

/***Child Component***/

import React, { Component } from "react";
import { withStyles, Typography } from "@material-ui/core";
import Switch from "react-switch";
class ReqLists extends Component {
  render() {
    const { lists, classes } = this.props;
    return (
      <div className={classes.reqWrapper}>
        {lists &&
          lists.map(list => {
            return (
              <div className={classes.reqCover} key={list.id}>
                <div className={classes.reqDetails}>
                  <Typography className={classes.reqListName}>
                    {list.name}
                    <span className={classes.reqListDetails}>
                      {list.details}
                    </span>
                  </Typography>
                  <Switch
                    className={classes.reqSwitch}
                    onChange={() => this.props.onChange(list.id)}
                    checked={this.props.checked === list.id}
                    offColor="#cacaca"
                    onColor="#2299e9"
                    uncheckedIcon={
                      <div className={classes.checkedIcon}>NO</div>
                    }
                    checkedIcon={<div className={classes.checkedIcon}>YES</div>}
                    height={17}
                    width={35}
                  />
                </div>
                {this.props.checked === list.id ? (
                  <div>
                    {list.description}
                  </div>
                ) : null}
              </div>
            );
          })}
      </div>
    );
  }
}

export default withStyles(styles)(ReqLists);

Answer 1

使用以下方法更改handleChange方法：所有您需要检查的ID是否等于检查的ID更新检查的状态。

 handleChange = id => {
    let selectedItemIndex = this.state.reqs.findIndex(item => item.id === id);
    if (selectedItemIndex !== this.state.checked) {
     this.setState({checked: selectedItemIndex});
    }else{
 this.setState({checked: null});
}
  };

使用React-switch动态创建多个交换机

1 个答案: