如何在React中为多个复选框设置处理程序？ [英] How to set the handler for multiple checkboxes in react?

问题描述

我在我的小型项目中创建了多个复选框。我在选中复选框的同时检索复选框的信息时遇到问题。如果我在玩具上打钩，则该值应为玩具，或者如果我在玩具和<$上都打钩c $ c> lights 我应该在控制台上放玩具和灯光。

这里是代码：

  import从反应中进行反应； 
 import {render} from react-dom; 
 import {Segment，Form，Checkbox，Button} from semantic-ui-react; 
从 axios导入axios； 
导出默认类ShowForm扩展了React.Component {
构造函数（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 / > 
<复选框标签= Flowers onChange = {this.handleCheck} /> 
< br /> 
<复选框标签= Toys onChange = {this .handleCheck} /> 
< br /> 
< Button onClick = {this.handleSubmit}>提交< / Button> 
< / Form> 
< / Segment> 
< / div> 
）； 
} 
} 
 
  

这是整个代码： < a href = https://codesandbox.io/s/zealous-paper-p9zb5 rel = nofollow noreferrer> https://codesandbox.io/s/zealous-paper-p9zb5

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

解决方案

您需要一个数组来存储所有已检查状态。

  handleCheck = id => （）=> {//从每个元素中获取标识
 const {checkedList} = this.state; 
 const result = CheckedList.includes（id）//检查此时是否选中
？ CheckedList.filter（x => x！== id）//如果选中，则删除
：[... checkedList，id]; //如果不是，则添加
 this.setState（{checkedList：result}，（）=> {// setState 
 console.log（this.state.checkedList）; // setState是异步的，登录回调
}）; 
}; 
  

如果需要，可以制作复选框组件是一个常见的组件，因此您不必在每个地方的三个位置上绑定标签。

 <复选框
 label = Cake 
 onChange = {this.handleCheck（ Cake）} 
checked = {checkedList.includes（  Cake）} // //如果包含，则选中
 /> 
  

---

另一个最小可重复演示

在文本中尝试：

  const list = [... Array（10）.keys（）]。map（x =>（{id：x}））; const App =（）=> {const [selected，setSelected] = React.useState（[]）; const onChangeHandler = id => （）=> {selected.includes（id）？ setSelected（selected.filter（x => x！== id））：setSelected（[... selected，id]）; }; const onRemove =（）=> {setSelected（[]）; }; return（< div className = App> {list.map（item =>（<输入类型= checkbox键= {item.id}已选中= {selected.includes（item.id）}} onChange = {onChangeHandler（item.id）} />））}< br />< button onClick = {onRemove}>删除所有< / button>< div> {selected.join（，） }< / div>< / div>）;} ReactDOM.render（< App /> ;, document.getElementById（ root））;  

< pre class = snippet-code-html lang-html prettyprint-override> < div id = root>< / div><脚本src = https：// cdnjs。 cloudflare.com/ajax/libs/react/16.12.0/umd/react.production.min.js\"></script><script src = https://cdnjs.cloudflare.com/ajax/libs /react-dom/16.12.0/umd/react-dom.production.min.js\"></script>

I've created multiple checkboxes in my small project. I'm facing a problem in retrieving the info of the checkbox while giving a checkmark. if I give a checkmark on toys then the value should be toys or if I give checkmark on both toys and lights i should get both toys and lights in the console.

Here is code:

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

Here is whole code: "https://codesandbox.io/s/zealous-paper-p9zb5"

Can anyone please help me in this issue?

解决方案

You need an array to store all the checked status.

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

And if you want, you can make the Checkbox component a common one so you don't need to bind the label in three places in each of it.

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

---

Another minimum reproducible demo

Try it in-text:

const list = [...Array(10).keys()].map(x => ({ id: x }));
const App = () => {
  const [selected, setSelected] = React.useState([]);
  const onChangeHandler = id => () => {
    selected.includes(id)
      ? setSelected(selected.filter(x => x !== id))
      : setSelected([...selected, id]);
  };
  const onRemove = () => {
    setSelected([]);
  };
  return (
    <div className="App">
      {list.map(item => (
        <input
          type="checkbox"
          key={item.id}
          checked={selected.includes(item.id)}
          onChange={onChangeHandler(item.id)}
        />
      ))}
      <br />
      <button onClick={onRemove}>Remove all</button>
      <div>{selected.join(",")}</div>
    </div>
  );
}
ReactDOM.render(<App />, document.getElementById("root"));

<div id="root"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.12.0/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.12.0/umd/react-dom.production.min.js"></script>

这篇关于如何在React中为多个复选框设置处理程序？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！