Javascript 如何在react中设置多个复选框的处理程序？

我在我的小项目中创建了多个复选框。我在给复选标记时检索复选框信息时遇到问题。如果我在玩具上打勾，那么值应该是

玩具

，或者如果我在

玩具

和

灯

上打勾，那么我应该在控制台中同时获得玩具和灯

以下是代码：

import React from "react";
import { render } from "react-dom";
import { Segment, Form, Checkbox, Button } from "semantic-ui-react";
import axios from "axios";
export default class ShowForm extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      event: ""
    };
  }
  handleCheck = event => {
    console.log("Hello", event);
  };
  render() {
    return (
      <div>
        <Segment>
          <Form>
            <Checkbox label="Cake" onChange={this.handleCheck} />
            <br />
            <Checkbox label="Lights" onChange={this.handleCheck} />
            <br />
            <Checkbox label="Flowers" onChange={this.handleCheck} />
            <br />
            <Checkbox label="Toys" onChange={this.handleCheck} />
            <br />
            <Button onClick={this.handleSubmit}> Submit </Button>
          </Form>
        </Segment>
      </div>
    );
  }
}

从“React”导入React；
从“react dom”导入{render}；
从“语义ui反应”导入{段、表单、复选框、按钮}；
从“axios”导入axios；
导出默认类ShowForm扩展React.Component{
建造师（道具）{
超级（道具）；
此.state={
事件：“
};
}
handleCheck=事件=>{
log（“Hello”，事件）；
};
render（）{
返回(








提交
);
}
}

下面是完整的代码：“

---

有人能帮我解决这个问题吗？

您需要一个数组来存储所有选中的状态

handleCheck = id => () => {                      // Get indentify from each element
  const { checkedList } = this.state;
  const result = checkedList.includes(id)        // Check if checked at this moment
    ? checkedList.filter(x => x !== id)          // If checked, remove
    : [...checkedList, id];                      // If not, add
  this.setState({ checkedList: result }, () => { // setState
    console.log(this.state.checkedList);         // setState is async, log in callback
  });
};

如果需要，您可以将

复选框

组件设为通用组件，这样就不需要在每个组件的三个位置绑定

标签

<Checkbox
  label="Cake"
  onChange={this.handleCheck("Cake")}
  checked={checkedList.includes("Cake")}   // If included, checked
/>

---

另一个最小可复制演示

在文本中尝试：

const list=[…数组（10）.keys（）].map（x=>（{id:x}））；
常量应用=（）=>{
const[selected，setSelected]=React.useState（[]）；
const onChangeHandler=id=>（）=>{
已选择。包括（id）
？设置已选择（已选择。过滤器（x=>x！==id））
：setSelected（[…selected，id]）；
};
const onRemove=（）=>{
选举（[]）；
};
返回(
{list.map（项=>(
))}


全部删除
{已选择。加入（“，”）}
);
}
render（，document.getElementById（“根”））
您需要一个数组来存储所有选中状态

handleCheck = id => () => {                      // Get indentify from each element
  const { checkedList } = this.state;
  const result = checkedList.includes(id)        // Check if checked at this moment
    ? checkedList.filter(x => x !== id)          // If checked, remove
    : [...checkedList, id];                      // If not, add
  this.setState({ checkedList: result }, () => { // setState
    console.log(this.state.checkedList);         // setState is async, log in callback
  });
};

如果需要，您可以将
复选框
组件设为通用组件，这样就不需要在每个组件的三个位置绑定
标签

<Checkbox
  label="Cake"
  onChange={this.handleCheck("Cake")}
  checked={checkedList.includes("Cake")}   // If included, checked
/>




另一个最小可复制演示

在文本中尝试：


const list=[…数组（10）.keys（）].map（x=>（{id:x}））；
常量应用=（）=>{
const[selected，setSelected]=React.useState（[]）；
const onChangeHandler=id=>（）=>{
已选择。包括（id）
？设置已选择（已选择。过滤器（x=>x！==id））
：setSelected（[…selected，id]）；
};
const onRemove=（）=>{
选举（[]）；
};
返回(
{list.map（项=>(
))}


全部删除
{已选择。加入（“，”）}
);
}
render（，document.getElementById（“根”））
非常肯定，您可以使用ES6命名属性和箭头函数来创建干净的流

以一个国家为例：

this.state={
   isToy: false,
   isCake: false,
   isFlower: false,
   isLight: false
}

添加名为的属性。这些名称最好与州中的名称匹配

<Form>
    <Checkbox name="isCake" label="Cake" checked={this.state.isCake} onChange={this.handleCheck} />
    <Checkbox name="isLight" label="Lights" checked={this.state.isLight} onChange={this.handleCheck} />
    <Checkbox name="isFlower" label="Flowers" checked={this.state.isFlower} onChange={this.handleCheck} />
    <Checkbox name="isToy" label="Toys" checked={this.state.isToy} onChange={this.handleCheck}  />
    <Button onClick={this.handleSubmit}> Submit </Button>
</Form>

参考文献：

受管制表格：

语义UI复选框：
非常肯定，您可以使用ES6命名属性和箭头函数来创建干净的流

以一个国家为例：

this.state={
   isToy: false,
   isCake: false,
   isFlower: false,
   isLight: false
}

添加名为的属性。这些名称最好与州中的名称匹配

<Form>
    <Checkbox name="isCake" label="Cake" checked={this.state.isCake} onChange={this.handleCheck} />
    <Checkbox name="isLight" label="Lights" checked={this.state.isLight} onChange={this.handleCheck} />
    <Checkbox name="isFlower" label="Flowers" checked={this.state.isFlower} onChange={this.handleCheck} />
    <Checkbox name="isToy" label="Toys" checked={this.state.isToy} onChange={this.handleCheck}  />
    <Button onClick={this.handleSubmit}> Submit </Button>
</Form>

参考文献：

受管制表格：

语义用户界面复选框：
你的意思是这样吗@ManirajMurugan-是的，但它应该存储在
事件
变量中。如果我点击了玩具和灯，那么它应该会显示事件：“玩具，灯”你的意思是你需要将它存储在一组选中的项目中吗？？你这里所说的
事件
是什么意思？？？@ManirajMurugan-是的，我想把它存储在一组选中的项目中。事件是一个字符串，我们需要它来存储选中的项目。你能看看这个吗@ManirajMurugan-是的，但它应该存储在
事件
变量中。如果我点击了玩具和灯，那么它应该会显示事件：“玩具，灯”你的意思是你需要将它存储在一组选中的项目中吗？？你这里所说的
事件
是什么意思？？？@ManirajMurugan-是的，我想把它存储在一组选中的项目中。事件是一个字符串，我们需要在其中存储选中的项目。你可以看看这个吗？谢谢！很好用。非常感谢您解决此问题！很好用。非常感谢您解决此问题并为我提供另一个解决方案：）。非常感谢你帮我看这个谢谢你给了我另一个解决方案：）。非常感谢你帮我看这个