antd radio取消选中
时间: 2023-05-03 16:03:52 浏览: 659
antd是一个基于React的开源UI组件库,提供了众多常用的UI组件,其中包括单选框(Radio)组件。如果想要取消antd radio的选中状态,常用的方法有两种:
1. 在代码中设置radio的value为空字符串:
在antd中,Radio.Group包裹着多个Radio.Button,可以通过设置Radio.Button的value属性来确定其值。如果想要取消radio的选中状态,可以将其value属性设置为空字符串。例如:
<Radio.Group defaultValue={''}>
<Radio.Button value={'apple'}>苹果</Radio.Button>
<Radio.Button value={'orange'}>橙子</Radio.Button>
<Radio.Button value={'banana'}>香蕉</Radio.Button>
</Radio.Group>
这样就可以实现取消radio选中状态的效果。
2. 在代码中手动设置radio选中的值:
通过设置radio的checked属性,可以手动控制它的选中状态。如果想要取消radio的选中状态,可以将其checked属性设置为false。例如:
const [value, setValue] = useState('apple');
<Radio.Group onChange={(e) => setValue(e.target.value)} value={value}>
<Radio.Button value={'apple'}>苹果</Radio.Button>
<Radio.Button value={'orange'}>橙子</Radio.Button>
<Radio.Button value={'banana'}>香蕉</Radio.Button>
</Radio.Group>
以上代码中,通过useState钩子函数来记录radio的选中值,当点击radio时,改变选中值并同步到组件中。如果想要取消选中,可以通过setValue函数手动设置value属性为空字符串。
阅读全文