ant.design <Checkbox.Group/> 带有互斥复选框答案

【问题标题】：ant.design <Checkbox.Group/> with mutually exclusive checkboxesant.design <Checkbox.Group/> 带有互斥复选框
【发布时间】：2021-03-26 12:33:31
【问题描述】：

以下组件应始终最多只选中两个复选框中的一个。尽管状态 checkedList 始终最多只包含一个值，但 UI 并不反映此状态。我错过了什么？

interface TeilnehmerProps {
  rolle: Teilnehmerrolle,
  teilnehmer: Teilnehmer,
  readonly: boolean
}

export const TeilnehmerCard = (props: TeilnehmerProps) => {
  const { rolle, teilnehmer, readonly } = props;
  const [name, setName] = useState<string>(teilnehmer?.name);
  const [checkedList, setCheckedList] = useState<CheckboxValueType[]>([teilnehmer?.abwesenheit]);


  const handleChecked = (list: CheckboxValueType[]) => {
    const set = new Set(list);
    if (set.size === 2) {
      set.delete(checkedList[0]);
      setCheckedList(Array.from(set));
    } else if (set.size === 1) {
      setCheckedList(Array.from(set));
    } else {
      setCheckedList([]);
    }
  };

  useEffect(() => {
    console.log(checkedList);
  }, [checkedList]);

  return <Card title="" size="small" className={styles.teilnehmerCard}>
    <Row key={teilnehmer?.rolle}>
      <Col lg={4}>
        <Form.Item name={`${teilnehmer?.rolle}.abwesenheit`}
                   initialValue={[teilnehmer?.abwesenheit]}>
          <Checkbox.Group value={checkedList}
                          disabled={readonly}
                          options={[{ value: 'ENTSCHULDIGT', label: '' }, { value: 'UNENTSCHULDIGT', label: '' }]}
                          onChange={handleChecked}>
          </Checkbox.Group>
        </Form.Item>
      </Col>
    </Row>
  </Card>;
};

【问题讨论】：

标签： reactjs react-hooks antd

【解决方案1】：

一旦包裹在<Form.Item/> 中，就不能也不应该再控制表单值，而是使用form.setFieldsValue()。

【讨论】：