ant-design Checkbox.Group 中配置Options的非预期行为,value值会错误的按照options中索引排序

vlju58qv  于 4个月前  发布在  其他
关注(0)|答案(6)|浏览(51)

Steps to reproduce

const options = [
{ label: 'A', value: 'A' },
{ label: 'B', value: 'B' },
]

<Checkbox.Group
options={options}
/>

<Checkbox.Group>
{options.map(({ label, value }) => (
{label}
))}
<Checkbox.Group>

这两种配置options的方式,在onChange时和表单中value的表现不同
第一种value会按options的顺序强制排序 先勾选B再勾选A是["A", "B"]
第二种value的顺序和选择顺序一致,先勾选B再勾选A是["B", "A"]

这种现象在antd4/5中都存在

What is expected?

value的顺序和选择顺序一致,先勾选B再勾选A是["B", "A"]

What is actually happening?

按options的顺序强制排序 先勾选B再勾选A是["A", "B"]
| Environment | Info |
| ------------ | ------------ |
| antd | undefined |
| React | 17.0.2 |
| System | mac |
| Browser | chrome |

https://github.com/ant-design/ant-design/blob/master/components/checkbox/Group.tsx

onChange?.(
newValue
.filter((val) => registeredValues.includes(val))
.sort((a, b) => {
const indexA = memoOptions.findIndex((opt) => opt.value === a);
const indexB = memoOptions.findIndex((opt) => opt.value === b);
return indexA - indexB;
}),
);

扫了下源码 应该是这个引起的,不知道是什么需求要求按索引排序

rqqzpn5f

rqqzpn5f3#

#17297
#17342

我去找大佬要个指导意见

cdmah0mi

cdmah0mi4#

@zombieJ 求一个修改指导意见

whitzsjs

whitzsjs5#

依赖顺序不太可靠,有什么需求是需要依赖这个顺序的?

6tqwzwtp

6tqwzwtp6#

#17297#17342

我去找大佬要个指导意见

有结论了么?目前最主要的是Checkbox.Group通过options和children两种形式开发的表现不同,如果需要sort的话建议增加一个api

相关问题