当用户单击单选组选项时如何调用函数，即使所选选项没有改变？答案

【问题标题】：How to call a function when the user clicks on the radio group options, even when the selected option doesn't change?当用户单击单选组选项时如何调用函数，即使所选选项没有改变？
【发布时间】：2021-08-13 12:49:59
【问题描述】：

我用过antdRadio 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);

【问题讨论】：

标签： reactjs antd onchange radio-group

【解决方案1】：

您可以使用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);

【讨论】：