如何在 react.js 中选中多个复选框? [英] How to checked multiple checkbox in react.js?

问题描述

我正在使用 react antd .我有 groupKey 的对象数组.我正在使用 Groupkey 映射复选框，并且我有两种不同类型的复选框.一种是全选复选框.当用户单击全选"或用户选择所有个人"复选框时，它实际上有效.另一个是单独的复选框，用户可以单独选择.当用户在 Button 上提交时，它会给我这个数据格式 ["manage_books","manage_journals","manage_deals"]

这是我的尝试代码:

 let defaultCheckedList = ["manage_deals"];状态 = {组键:[{编号:1，键:manage_books"，标签:书"},{编号:2，键:manage_journals"，标签:期刊"},{编号:3，键:管理交易"，标签:优惠"}],选中列表:默认选中列表，输出: []，不确定:真实，全部检查:假};onCheckAllChange = e =>{this.setState({已检查列表:e.target.checked ?this.state.groupKey.map(item => item.key) :[],不确定:假，checkAll: e.target.checked});};onChange = (e, value) =>{this.setState({检查:e.target.checked，输出:this.state.output.concat(value)});};onSubmit = () =>{console.log(this.state.output)}渲染(用户界面)<div ><div className = "site-checkbox-all-wrapper" >全选复选框不确定 = {这个.state.indeterminate}onChange = {this.onCheckAllChange}检查 = {this.state.checkAll}/></div>我正在通过 groupKey 循环复选框.我正在使用 onChange 方法传递密钥.{this.state.groupKey.map(item => ( <div className = "用户权限-内容"键 = {项目编号} >{item.label} <复选框 onChange = {(e，值)＝＞this.onChange(e, item.key)}价值 = {item.key}/>{" "} 

))} <按钮点击 = {this.onSubmit} >提交</div>);}}

在这段代码中，你可以看到两个单独的复选框是初始选择，我需要完全像这样:https://codesandbox.io/s/4k6qi

这是我的 codesanbox:https://codesandbox.io/s/check-all-ant-design-demo-vhidd?file=/index.js

解决方案

这是我想出来的

https://codesandbox.io/s/check-all-ant-design-demo-6cm2v?file=/index.js

从react"导入React；从react-dom"导入 ReactDOM；导入antd/dist/antd.css"；导入./index.css"；从antd"导入{复选框}；const CheckboxGroup = Checkbox.Group;类 App 扩展了 React.Component {状态 = {组键:[{ id: 1, key: "manage_books", label: "books" },{ id: 2, key: "manage_journals", label: "journals" },{ id: 3, key: "manage_deals", label: "deals" }],检查:{}，输出: []，不确定:真实，全部检查:假};onCheckAllChange = e =>{const { groupKey } = this.state;const 检查 = groupKey.reduce((prev, curr) => {return { ...prev, [curr.key]: e.target.checked };}, {});this.setState({checked, checkAll: e.target.checked });};checkAll = () =>{};onChange = (e, value) =>{//this.setState({//检查:e.target.checked,//输出:this.state.output.concat(value)//});这个.setState(状态 =>({已检查:{ ...state.checked，[值]:e.target.checked }}),() =>{const { 选中，groupKey } = this.state;const 值 = Object.values(checked);if (values.length === groupKey.length && values.every(v => v)) {this.setState({ checkAll: true });} 别的 {this.setState({ checkAll: false });}});};使成为() {控制台日志(this.state.output)；const { 选中，checkAll } = this.state;返回 (<div><div className="site-checkbox-all-wrapper">全选<复选框//不确定={this.state.indeterminate}onChange={this.onCheckAllChange}已检查={checkAll}/>

{this.state.groupKey.map(item => (<div className="userpermission-content" key={item.id}>{item.label}<复选框onChange={e =>this.onChange(e, item.key)}值={item.key}选中={选中[item.key]}/>{" "}

))}

);}}ReactDOM.render(, document.getElementById("container"));

I am using react antd . I have got array of objects that's groupKey .I am mapping checkbox by using Groupkey and also I have got two different types of checkbox . One is Select All Checkbox . it actually works when user click on the Select All or User select on all individual checkbox . Other is individual checkbox , user can Select on individually . when user submit on Button , then it's give me this data format ["manage_books","manage_journals","manage_deals"]

here is my trying code :

 let defaultCheckedList = ["manage_deals"];


state = {
    groupKey: [{
            id: 1,
            key: "manage_books",
            label: "books"
        },
        {
            id: 2,
            key: "manage_journals",
            label: "journals"
        },
        {
            id: 3,
            key: "manage_deals",
            label: "deals"
        }
    ],
    checkedList: defaultCheckedList,
    output: [],
    indeterminate: true,
    checkAll: false
};
onCheckAllChange = e => {
    this.setState({
        checkedList: e.target.checked ?
            this.state.groupKey.map(item => item.key) :
            [],
        indeterminate: false,
        checkAll: e.target.checked
    });
};

onChange = (e, value) => {
    this.setState({
        checked: e.target.checked,
        output: this.state.output.concat(value)
    });
};
onSubmit = () => {
    console.log(this.state.output)
}

render(UI)

    <
    div >
    <
    div className = "site-checkbox-all-wrapper" >
    Select All <
    Checkbox
indeterminate = {
    this.state.indeterminate
}
onChange = {
    this.onCheckAllChange
}
checked = {
    this.state.checkAll
}
/> <
/div>

I am looping checkbox by groupKey.I am passing key using onChange method. {
        this.state.groupKey.map(item => ( <
            div className = "userpermission-content"
            key = {
                item.id
            } > {
                item.label
            } <
            Checkbox onChange = {
                (e, value) => this.onChange(e, item.key)
            }
            value = {
                item.key
            }
            />{" "} <
            /div>
        ))
    } <
    button onClick = {
        this.onSubmit
    } > submit < /button> <
    /div>
);
}
}

In this code, you can see that two individual checkbox is initial select, I need to get completely like this: https://codesandbox.io/s/4k6qi

this is my codesanbox: https://codesandbox.io/s/check-all-ant-design-demo-vhidd?file=/index.js

解决方案

Here is what I have come up with

https://codesandbox.io/s/check-all-ant-design-demo-6cm2v?file=/index.js

import React from "react";
import ReactDOM from "react-dom";
import "antd/dist/antd.css";
import "./index.css";
import { Checkbox } from "antd";

const CheckboxGroup = Checkbox.Group;

class App extends React.Component {
  state = {
    groupKey: [
      { id: 1, key: "manage_books", label: "books" },
      { id: 2, key: "manage_journals", label: "journals" },
      { id: 3, key: "manage_deals", label: "deals" }
    ],
    checked: {},
    output: [],
    indeterminate: true,
    checkAll: false
  };
  onCheckAllChange = e => {
    const { groupKey } = this.state;
    const checked = groupKey.reduce((prev, curr) => {
      return { ...prev, [curr.key]: e.target.checked };
    }, {});
    this.setState({ checked, checkAll: e.target.checked });
  };
  checkAll = () => {};
  onChange = (e, value) => {
    // this.setState({
    //   checked: e.target.checked,
    //   output: this.state.output.concat(value)
    // });
    this.setState(
      state => ({
        checked: { ...state.checked, [value]: e.target.checked }
      }),
      () => {
        const { checked, groupKey } = this.state;
        const values = Object.values(checked);
        if (values.length === groupKey.length && values.every(v => v)) {
          this.setState({ checkAll: true });
        } else {
          this.setState({ checkAll: false });
        }
      }
    );
  };
  render() {
    console.log(this.state.output);
    const { checked, checkAll } = this.state;
    return (
      <div>
        <div className="site-checkbox-all-wrapper">
          Select All
          <Checkbox
            // indeterminate={this.state.indeterminate}
            onChange={this.onCheckAllChange}
            checked={checkAll}
          />
        </div>
        {this.state.groupKey.map(item => (
          <div className="userpermission-content" key={item.id}>
            {item.label}
            <Checkbox
              onChange={e => this.onChange(e, item.key)}
              value={item.key}
              checked={checked[item.key]}
            />{" "}
          </div>
        ))}
      </div>
    );
  }
}

ReactDOM.render(<App />, document.getElementById("container"));

这篇关于如何在 react.js 中选中多个复选框?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！