如何在用户单击无线电组选项时调用函数，即使选定的选项没有改变？

问题描述

我已经使用了 antd Radio Group 并且我想在用户点击选项时调用一个函数，无论该选项是否被选中。

我使用了 onChange 但它仅适用于更改选定的选项情况。 假设我的广播组中有以下选项：A、B、C。现在选择了 A。我想在用户点击 A 时 console.log("A")。如果用户点击 A 两次，我想两次 console.log。

import { Radio } from 'antd';
const RadioButton = Radio.Button;
const RadioGroup = Radio.Group;

function onChange(e) {
  console.log(`radio checked:${e.target.value}`);
}

ReactDOM.render(
  <div>
    <div>
      <RadioGroup onChange={onChange} defaultValue="a">
        <RadioButton value="a">Hangzhou</RadioButton>
        <RadioButton value="b">Shanghai</RadioButton>
        <RadioButton value="c">Beijing</RadioButton>
      </RadioGroup>
    </div>
  </div>,mountNode);

解决方法

您可以使用 onClick，但它不适用于 RadioGroup 组件。因此，将其放入每个 Radio.Button 组件将是一个选择。

function onClick(e) {
  console.log(`radio clicked:${e.target.value}`);
}

ReactDOM.render(
  <div>
    <div>
      <RadioGroup onChange={onChange} defaultValue="a">
        <RadioButton onClick={onClick} value="a">Hangzhou</RadioButton>
        <RadioButton onClick={onClick} value="b">Shanghai</RadioButton>
        <RadioButton onClick={onClick} value="c">Beijing</RadioButton>
      </RadioGroup>
    </div>
  </div>,mountNode);