Блог

Я использую флажки ANT и групповое поле, мне нужна возможность проверять и снимать все флажки сразу.
Для этого я использовал рекомендуемый 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', 'Pear', 'Orange']; //This works
  //This doesn't work, but it should.
  //const plainOptions = [{label: 'Apple', value: '1'}, {label: 'Orange', 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 amp;amp; 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 это не работает.