背景
antd-mobile中Form.Item下放入选择组Selector之后,多选是没问题的,也可以不选;
<Form.Item name='favoriteFruits' label='喜爱的水果'>
<Selector
columns={3}
multiple
options={[
{ label: '苹果', value: 'apple' },
{ label: '橘子', value: 'orange' },
{ label: '香蕉', value: 'banana' },
]}
/>
</Form.Item>
Selector组件中举例了只选一个的情况,在onChange事件中判断如果当前选中为空的时候不让操作即可实现单选。
<Selector
options={options}
value={[value]}
onChange={v => {
if (v.length) {
setValue(v[0])
}
}}
/>
需求
在Form表单的Item中放入选择组,但实现的是单选的交互效果。
问题
按需求将以上两种情况组合后,奇迹发生了:选中的按钮再次点击会被取消。
解决
经过尝试,解决方案有下:
- 去掉当前Form.Item的name属性;
- 在当前Selector之后放入一个空的选择组;
<Selector options={[]} />
- 使用单选框,然后把UI改成选择组的样子。
请根据实际情况自己选择。