如何在用户单击单选组选项时调用函数，即使所选选项没有更改？

Question

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

Answer 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);

如何在用户单击单选组选项时调用函数，即使所选选项没有更改？

How to call a function when the user clicks on the radio group options, even when the selected option doesn't change?

onchange

radio-group

reactjs

antd