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

问题描述

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

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"]

这是我尝试的代码:

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

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

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

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

this is my 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

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屋！