如何在reactjs中使用antd多个复选框? [英] How to use antd multiple checkbox in reactjs?

查看:31
本文介绍了如何在reactjs中使用antd多个复选框?的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我正在使用 antd 复选框.我正在使用 value 数组存储检查值,但我需要存储 unchecked 值数组.

 const plainOptions = ["Apple", "Pear", "Orange"];const defaultCheckedList = ["Apple", "Orange"];状态 = {已检查列表:默认检查列表};onChange = 选中列表 =>{this.setState({检查列表});};onCheckAllChange = e =>{this.setState({已检查列表:e.target.checked ?普通选项:[]});};onCheckItem = 值 =>e =>{this.setState({已检查列表:this.state.checkedList.includes(value)?this.state.checkedList.filter(x => x !== 值): [...this.state.checkedList, value]});};//这是全部选中的,当用户点击这个选中的框时,它将存储值数组.<复选框不确定={checkList.length <plainOptions.length &&checkList.length >0}onChange={this.onCheckAllChange}选中={checkedList.length === plainOptions.length}>选择所有</复选框>{plainOptions.map((item, idx) => (<复选框键={项目+ idx}onChange={this.onCheckItem(item)}选中={checkedList.includes(item)}>{物品}</复选框>))}

目前,当我选中 checkbox 时,它会给我一个值数组,例如 ["apple","Orange"],但我想通过使用值数组 ["Pear"] 来保持存储未选中的值

未检查的预期输出:未选中:["梨"]

这是我的密码箱:

https://codesandbox.io/s/check-all-ant-design-demo-b3udh?fontsize=14&hidenavigation=1&theme=dark&file=/index.js:0-1613

解决方案

const plainOptions = ["Apple", "Pear", "Orange"];const defaultCheckedList = ["Apple", "Orange"];类 App 扩展了 React.Component {状态 = {选中列表:默认选中列表,未选中列表:[]};onChange = 选中列表 =>{this.setState({检查列表});};onCheckAllChange = e =>{this.setState({已检查列表:e.target.checked ?普通选项:[],uncheckedList: e.target.checked ?[] : 普通选项});};onCheckItem = 值 =>e =>{这个.setState({已检查列表:this.state.checkedList.includes(value)?this.state.checkedList.filter(x => x !== 值): [...this.state.checkedList, value]},() =>{this.setState({uncheckedList:plainOptions.filter(=>!this.state.checkedList.includes(o))});});};使成为() {const {checkedList, uncheckedList } = this.state;console.log(uncheckedList);返回 (<div><div className="site-checkbox-all-wrapper"><复选框不确定={checkList.length <plainOptions.length &&checkList.length >0}onChange={this.onCheckAllChange}选中={checkedList.length === plainOptions.length}>选择所有</复选框>

<br/>{plainOptions.map((item, idx) => (<复选框键={项目+ idx}onChange={this.onCheckItem(item)}选中={checkedList.includes(item)}>{物品}</复选框>))}

);}}

I am using antd checkbox . I am storing checked value by using array of value , but I need to store unchecked array of value .

    const plainOptions = ["Apple", "Pear", "Orange"];
    const defaultCheckedList = ["Apple", "Orange"];

      state = {
        checkedList: defaultCheckedList
      };

      onChange = checkedList => {
        this.setState({
          checkedList
        });
      };

      onCheckAllChange = e => {
        this.setState({
          checkedList: e.target.checked ? plainOptions : []
        });
      };

      onCheckItem = value => e => {
        this.setState({
          checkedList: this.state.checkedList.includes(value)
            ? this.state.checkedList.filter(x => x !== value)
            : [...this.state.checkedList, value]
        });
      };

 // This is checked All , When user click on this checked box , it will be store array of value.  
              <Checkbox
                indeterminate={
                  checkedList.length < plainOptions.length && checkedList.length > 0
                }
                onChange={this.onCheckAllChange}
                checked={checkedList.length === plainOptions.length}
              >
                Check all
              </Checkbox>

            {plainOptions.map((item, idx) => (
              <Checkbox
                key={item + idx}
                onChange={this.onCheckItem(item)}
                checked={checkedList.includes(item)}
              >
                {item}
              </Checkbox>
            ))}

Currently, when I checked on checkbox , it will give me array of values such as ["apple","Orange"], but I want to keep store unchecked value by using array of value ["Pear"]

Expected Output for Unchecked : Unchecked : ["Pear"]

Here is my codesanbox:

https://codesandbox.io/s/check-all-ant-design-demo-b3udh?fontsize=14&hidenavigation=1&theme=dark&file=/index.js:0-1613

解决方案

const plainOptions = ["Apple", "Pear", "Orange"];
const defaultCheckedList = ["Apple", "Orange"];

class App extends React.Component {
  state = {
    checkedList: defaultCheckedList,
    uncheckedList: []
  };

  onChange = checkedList => {
    this.setState({
      checkedList
    });
  };

  onCheckAllChange = e => {
    this.setState({
      checkedList: e.target.checked ? plainOptions : [],
      uncheckedList: e.target.checked ? [] : plainOptions
    });
  };

  onCheckItem = value => e => {
    this.setState(
      {
        checkedList: this.state.checkedList.includes(value)
          ? this.state.checkedList.filter(x => x !== value)
          : [...this.state.checkedList, value]
      },
      () => {
        this.setState({
          uncheckedList: plainOptions.filter(
            o => !this.state.checkedList.includes(o)
          )
        });
      }
    );
  };

  render() {
    const { checkedList, uncheckedList } = this.state;
    console.log(uncheckedList);
    return (
      <div>
        <div className="site-checkbox-all-wrapper">
          <Checkbox
            indeterminate={
              checkedList.length < plainOptions.length && checkedList.length > 0
            }
            onChange={this.onCheckAllChange}
            checked={checkedList.length === plainOptions.length}
          >
            Check all
          </Checkbox>
        </div>
        <br />
        {plainOptions.map((item, idx) => (
          <Checkbox
            key={item + idx}
            onChange={this.onCheckItem(item)}
            checked={checkedList.includes(item)}
          >
            {item}
          </Checkbox>
        ))}
      </div>
    );
  }
}

这篇关于如何在reactjs中使用antd多个复选框?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
相关文章
前端开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆