ReactJS实现选中值按升序显示的方法

完全没问题！要实现不管选择顺序如何，选中的复选框值都按升序展示，核心就是在维护选中状态的同时，始终对选中项做排序处理，而不是直接按选择顺序存储。下面给你具体的实现思路和代码示例：

1. 初始化状态与选项管理 #

首先用React的useState钩子统一维护选项列表和选中状态，把选项的数值单独抽出来，后续排序会更方便：

import { useState } from 'react';
import Checkbox from './Checkbox'; // 替换成你的Checkbox组件路径

const CheckboxGroup = () => {
  // 统一管理所有可选选项，包含显示标签和对应数值
  const options = [
    { label: 'Key 50', value: 50 },
    { label: 'Key 51', value: 51 },
    { label: 'Key 52', value: 52 },
    { label: 'Key 53', value: 53 },
    { label: 'Key 54', value: 54 },
  ];

  // 初始化选中项数组
  const [selectedItems, setSelectedItems] = useState([]);

2. 处理选择/取消逻辑并自动排序 #

编写一个处理复选框状态变化的函数，每次更新选中项后，立即对数组按数值升序排序：

const handleToggle = (option) => {
    setSelectedItems(prev => {
      // 判断当前选项是否已被选中
      const isAlreadySelected = prev.some(item => item.value === option.value);
      
      let updatedItems;
      if (isAlreadySelected) {
        // 取消选中：过滤掉当前选项
        updatedItems = prev.filter(item => item.value !== option.value);
      } else {
        // 添加选中：将选项加入数组
        updatedItems = [...prev, option];
      }
      
      // 按数值升序排序，确保展示顺序固定
      return updatedItems.sort((a, b) => a.value - b.value);
    });
  };

3. 渲染复选框与排序后的选中结果 #

最后渲染复选框列表，以及始终保持升序的选中结果：

return (
    <div className="checkbox-group">
      {/* 渲染复选框列表 */}
      <div className="options">
        {options.map(option => (
          <label key={option.value}>
            <Checkbox
              checked={selectedItems.some(item => item.value === option.value)}
              onChange={() => handleToggle(option)}
            />
            {option.label}
          </label>
        ))}
      </div>

      {/* 渲染排序后的选中结果 */}
      <div className="selected-result">
        <h4>选中项（升序）：</h4>
        {selectedItems.length > 0 ? (
          <ul>
            {selectedItems.map(item => (
              <li key={item.value}>{item.label}</li>
            ))}
          </ul>
        ) : (
          <p>暂无选中项</p>
        )}
      </div>
    </div>
  );
};

export default CheckboxGroup;

额外适配场景 #

如果你的选项标签是纯字符串格式（比如直接用"Key 50"作为标识），可以提取标签里的数字再排序：

updatedItems.sort((a, b) => {
  const numA = parseInt(a.label.split(' ')[1], 10);
  const numB = parseInt(b.label.split(' ')[1], 10);
  return numA - numB;
});

这样不管用户按什么顺序点击复选框，最终展示的选中项都会严格按升序排列啦！

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