如何解决如何在用户单击无线电组选项时调用函数,即使选定的选项没有改变?
我已经使用了 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);
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。