在antd复选框组中禁用按字母或数字排序选择

Question

我有这个代码 `

import React, { useState } from 'react';
import './index.css';
import { Checkbox } from 'antd';
const CheckboxGroup = Checkbox.Group;
const plainOptions = ['Apple', 'Pear', 'Orange'];

const App = () => {
  const [checkedList, setCheckedList] = useState([]);

  const onChange = (list) => {
    setCheckedList(list);
    console.log(list);
  };

  return (
    <>
      <CheckboxGroup
        options={plainOptions}
        value={checkedList}
        onChange={onChange}
      />
    </>
  );
};

export default App;

当我按这种方式单击时，我遇到了问题：第一个：Orange，第二个：Apple console.log(list) 是 ["Apple", "Orange"] 我需要输出为 ["Orange", "Apple"] 它应该按照我选择的顺序，而不是排序

我尝试解决这个问题，但没有解决 对于另一个代码，我检查的类型对我来说很重要

Answer 1

要实现这一点，您需要更复杂的

onChange

函数逻辑。您需要遍历

checkedList

中的所有元素并删除所有未选中的元素。然后添加

list

中所有已检查的元素，这些元素在

checkedList

中不存在：

import React, { useState } from "react";
import "./index.css";
import { Checkbox } from "antd";
const CheckboxGroup = Checkbox.Group;
const plainOptions = ["Apple", "Pear", "Orange"];

const App = () => {
  const [checkedList, setCheckedList] = useState([]);

  const onChange = (list) => {
    let nextCheckedList = checkedList.filter((item) => list.includes(item));
    const newChecked = list.find((item) => !nextCheckedList.includes(item));
    if (newChecked != undefined) {
      nextCheckedList.push(newChecked);
    }

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

  return (
    <>
      <CheckboxGroup
        options={plainOptions}
        value={checkedList}
        onChange={onChange}
      />
    </>
  );
};

export default App;