如何将 ANT GroupBox 中的值用于 CheckBoxes？

问题描述

我正在使用 ANT 复选框和 GroupBox，我需要能够一次选中和取消选中所有复选框。
为了做到这一点，我使用了 ANT 推荐的实现复选框 GroupBox 的方式。
一切都很好，但我现在不能在复选框中设置值，并且在 ANT 网站上没有关于它的文档。例如，当我使用字符串数组时，一切正常，但是当我使用也推荐在 ANT 上使用的对象数组时，它不起作用。如果我是变量，这一切正常

const plainoptions = ['Apple','Pear','Orange'];

但是当我将它与对象一起使用时，它不会

const plainoptions = [{label: 'Apple',value: '1'},{label: 'Orange',value: '2'}];

如果复选框没有值，我不明白使用复选框有什么意义：

import React,{ useState } from 'react';
import { Card,Button,Space,Row,Col,Input,Select,Modal,CheckBox,Form } from 'antd';

 const { Option } = Select;
 const CheckBoxGroup = CheckBox.Group;




 const Content= () => {
  const plainoptions = ['Apple','Orange']; //This works
  //This doesn't work,but it should.
  //const plainoptions = [{label: 'Apple',value: '2'}];


  const defaultCheckedList = [];
  const [checkedList,setCheckedList] = useState(defaultCheckedList);
  const [indeterminate,setIndeterminate] = useState(true);
  const [checkAll,setCheckAll] = useState(false);



  const onChange = list => {
   setCheckedList(list);
   setIndeterminate(!!list.length && list.length < plainoptions.length);
   setCheckAll(list.length === plainoptions.length);
  };

  const onCheckAllChange = e => {
   setCheckedList(e.target.checked ? plainoptions : []);
   setIndeterminate(false);
   setCheckAll(e.target.checked);
  };




return(
 <div>
  <CheckBox
    indeterminate={indeterminate}
    onChange={onCheckAllChange}
    checked={checkAll}
   >
    All
   </CheckBox>

    <CheckBoxGroup
      className="vertical-checkBox-group"
      options={plainoptions}
      value={checkedList}
      onChange={onChange}
     />
   </div>
  )
 }

导出默认内容；有没有人可能知道如何正确地做到这一点？，我知道也有人用 for 循环来做，但我担心这是错误的实现方式，它会产生新的问题。使用带有标签和值的对象也是 ANT 推荐的实现方式，但它不适用于 GroupBox。

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）

ant-design-pro antd groupbox reactjs reactjs