Javascript 如何使用reactjs切换开关标记

我的目标是根据各自的id切换开关，但我无法切换开关

我试过这样做：

   <Switch
                  checked={data.isShow}
                  onChange={this.handleChange}
                  color="primary"
                  name={data.isShow ? "On" : "Off"}
                  inputProps={{ "aria-label": "primary checkbox" }}
                />
        

  handleChange = () => {
    this.setState({ isShow: !this.state.isShow });
  };

---

有人能帮我查询吗？

对于特定元素，您应该

handleChange

。这里我传递元素的id，并仅切换该元素的

isShow

handleChange = (id) => {
  this.setState({
    info: this.state.info.map((i) => {
      if (i.id === id) {
        return {
          ...i,
          isShow: !i.isShow
        };
      } else {
        return i;
      }
    })
  });
};

// ...

<Switch
  checked={data.isShow}
  onChange={() => this.handleChange(data.id)}
  color="primary"
  name={data.isShow ? "On" : "Off"}
  inputProps={{ "aria-label": "primary checkbox" }}
/>

handleChange=（id）=>{
这是我的国家({
信息：this.state.info.map（（i）=>{
如果（i.id==id）{
返回{
我
伊索：！我，伊索
};
}否则{
返回i；
}
})
});
};
// ...
this.handleChange（data.id）}
color=“primary”
name={data.isShow？“开”：“关”}
inputProps={{“aria标签”：“主复选框”}
/>

分叉演示

---

将

handleChange

功能更改为：

handleChange = (event) => {
let changeId = parseInt(event.target.id);
let info = this.state.info.map((data) => {
  if (data.id === changeId) {
    return Object.assign({}, data, {
      isShow: !data.isShow
    });
  }
  return data;
});
this.setState({info: info});
};

包括

id

作为组件参数的一部分

<Switch
  checked={data.isShow}
  onChange={this.handleChange}
  id={data.id}
  color="primary"
  name={data.isShow ? "On" : "Off"}
  inputProps={{ "aria-label": "primary checkbox" }}
/>

编辑：

---

对您提供的示例链接进行了编辑-它正在工作

不需要状态变量，只需更新handleChange（）中的信息数组即可。以下是handleChange（）方法中的更改

---

您需要从

info

数组中的项目（在您的状态下）更改

isShow

属性

您可以使用

find（）

查找具有相同

id

，
的项目 但在此之前，您需要使用

slice（）

来复制

info

数组，因为您不会改变您的状态

切勿直接对this.state进行变异，因为之后调用setState（）可能会替换您所做的变异。将this.state视为不可变的

（引用自）

您的

handleChange（）

方法应该如下所示：

handleChange = (id) => {
    const data = this.state.info.slice();
    const item = data.find((item) => item.id === id);
    item.isShow = !item.isShow;
    this.setState(data);
  };

下面是完整的结果：

handleChange = (id) => {
    const data = this.state.info.slice();
    const item = data.find((item) => item.id === id);
    item.isShow = !item.isShow;
    this.setState(data);
  };