Reproduction link
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;
}),
);
扫了下源码 应该是这个引起的,不知道是什么需求要求按索引排序
6条答案
按热度按时间uurv41yg1#
Start a new pull request in StackBlitz Codeflow .
vfhzx4xs2#
c8d5243 这次提交加入的排序 @ yoyo837
https://github.com/ant-design/ant-design/commits/master/components/checkbox/Group.tsx?after=92a597344273c9be2a1b281b75919fffd94fba5e+34
rqqzpn5f3#
#17297
#17342
我去找大佬要个指导意见
cdmah0mi4#
@zombieJ 求一个修改指导意见
whitzsjs5#
依赖顺序不太可靠,有什么需求是需要依赖这个顺序的?
6tqwzwtp6#
#17297#17342
我去找大佬要个指导意见
有结论了么?目前最主要的是Checkbox.Group通过options和children两种形式开发的表现不同,如果需要sort的话建议增加一个api