antd checkboxgroup组互斥问题

Question

我需要实现 第一个暂不关联和其余的互斥
选择了暂不关联 其余的就会清空
选择其余的就会让暂不关联取消选择

Answer 1

自己控制一下

import React, { useState, useEffect, Fragment } from 'react';
import ReactDOM from 'react-dom';
import 'antd/dist/antd.css';
import './index.css';
import { Checkbox, Row, Col } from 'antd';

const CheckDom = ({}) => {
  const options = ['暂不关联', '驱虫', '洗澡'];
  const [value, setValue] = useState([]);
  const onChange = (checkedValues) => {
    if (checkedValues.includes('暂不关联') && !value.includes('暂不关联')) {
      setValue(['暂不关联']);
    } else if (value.includes('暂不关联')) {
      setValue(checkedValues.filter((text) => text !== '暂不关联'));
    } else {
      setValue(checkedValues);
    }
  };
  return (
    <Checkbox.Group
      value={value}
      options={options}
      style={{ width: '100%' }}
      onChange={onChange}
    />
  );
};

ReactDOM.render(<CheckDom />, document.getElementById('container'));