Antd Checkbox Group禁用排序：保留实际勾选顺序而非自动排序

Antd的CheckboxGroup组件默认会根据传入的options数组顺序对选中项进行排序，这就是你按Orange→Apple顺序勾选，但返回结果却是["Apple", "Orange"]的原因。要保留实际勾选顺序，需要手动控制选中列表的维护逻辑，具体方案如下：

解决方案：手动渲染Checkbox并自定义勾选逻辑 #

放弃使用CheckboxGroup的options自动渲染，改为手动渲染每个Checkbox，通过自定义点击事件维护勾选顺序：

import React, { useState } from 'react';
import './index.css';
import { Checkbox } from 'antd';

const plainOptions = ['Apple', 'Pear', 'Orange'];

const App = () => {
  // 维护记录勾选顺序的状态数组
  const [checkedList, setCheckedList] = useState([]);

  // 自定义单个Checkbox的点击事件
  const handleCheckboxChange = (option, e) => {
    const isChecked = e.target.checked;
    let newCheckedList;

    if (isChecked) {
      // 勾选时，将选项添加到数组末尾
      newCheckedList = [...checkedList, option];
    } else {
      // 取消勾选时，从数组中移除对应选项
      newCheckedList = checkedList.filter(item => item !== option);
    }

    setCheckedList(newCheckedList);
    console.log(newCheckedList);
  };

  return (
    <>
      {plainOptions.map(option => (
        <Checkbox
          key={option}
          checked={checkedList.includes(option)}
          onChange={(e) => handleCheckboxChange(option, e)}
        >
          {option}
        </Checkbox>
      ))}
    </>
  );
};

export default App;

代码说明 #

• 不再依赖CheckboxGroup的自动处理，逐个渲染Checkbox组件
• 点击每个Checkbox时，根据当前勾选状态更新checkedList：勾选则追加到数组末尾，取消则过滤掉对应项
• checked属性通过判断checkedList中是否包含当前选项来控制，确保状态同步

这样修改后，按Orange→Apple的顺序勾选时，控制台会输出["Orange", "Apple"]，完全保留实际操作顺序，满足业务逻辑需求。

内容的提问来源于stack exchange，提问作者Reyhan