antd Radio 实现点击取消选择

antd Radio 实现点击取消选择

import React, { useState } from 'react';
import './index.css';
import type { RadioChangeEvent } from 'antd';
import { Radio } from 'antd';

const App: React.FC = () => {
  const [value, setValue] = useState(1);

  const onChange = (e: RadioChangeEvent) => {
    console.log('radio checked', e.target.value);
    setValue(e.target.value);
  };
	// 点击时如果value等于点击的值清空value就好了
  return (
    <Radio.Group onChange={onChange} value={value}>
      <Radio
        onClick={() => {
          value === 1 ? setValue(null) : false;
        }}
        value={1}
      >
        A
      </Radio>
      <Radio
        onClick={() => {
          value === 2 ? setValue(null) : false;
        }}
        value={2}
      >
        B
      </Radio>
      <Radio
        onClick={() => {
          value === 3 ? setValue(null) : false;
        }}
        value={3}
      >
        C
      </Radio>
      <Radio
        onClick={() => {
          value === 4 ? setValue(null) : false;
        }}
        value={4}
      >
        D
      </Radio>
    </Radio.Group>
  );
};

export default App;