按指定顺序显示选定的下拉项目

Question

我正在开发一个 React 应用程序，我想构建一个下拉列表，用户可以在其中选择员工的工作日。

我已经使用 NextUI 实现了自定义 React 元素，它将以下数组映射为 SelectItem 选项：

const workingDaysOptions = ["Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday", "Sunday"] 

自定义元素：

const CustomSelect = ({classAttributes, label, placeholder, selectionMode, selectedKeys, onSelectionChange, mappedArray, isRequired}) => {

    return(
        <Select
            className={classAttributes}
            label={label}
            placeholder={placeholder}
            selectionMode={selectionMode}
            selectedKeys={selectedKeys}
            onSelectionChange={onSelectionChange}
            isRequired={isRequired}
            >
            {mappedArray.map((option) => (
                <SelectItem key={option} value={option}>
                    {option}
                </SelectItem>
            ))}
        </Select>

    )
}

`const [selectedWorkingDaysOptions, setSelectedWorkingDaysOptions] = useState([]);

常量handleSelection = () => { setSelectedWorkingDaysOptions(); }`

元素会按照选择的顺序自动并排显示，并用逗号分隔。我想要实现的是检查workingDaysOptions数组中所选日期的索引，并相应地对selectedWorkingDaysOptions中的日期进行排序。

示例：如果用户选择“星期二”、“星期五”、“星期一”，则应显示为“星期一”、“星期二”、“星期五”

我尝试过在对象中定义严格顺序之类的选项，但这样选择就不会发生。

    const workingDaySorter = {
        "monday": 1,
        "tuesday": 2,
        "wednesday": 3,
        "thursday": 4,
        "friday": 5,
        "saturday": 6,
        "sunday": 7
      }


    const handleSelection = () => {
        selectedWorkingDaysOptions.sort(function (a, b) {
            const day1 = a.toLowerCase();
            const day2 = b.toLowerCase();
            return workingDaySorter[day1] - workingDaySorter[day2];
        });
        setSelectedWorkingDaysOptions(selectedWorkingDaysOptions);
        
    };

Answer 1

如果您将所选值保留在状态中，则可以将选项数组创建为当前所选值加上剩余值。

例如

const [selection, setSelection] = useState<readonly string[]>([])

{[...selection,... workingDaysOptions.filter(v=>selection.includes(v))].map((option) => (...

然后，如果当您处理选择时，将其添加到数组的开头，它应该按预期工作。

setSelection(current=>[value,...setSelection])