我正在开发一个 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);
};
如果您将所选值保留在状态中,则可以将选项数组创建为当前所选值加上剩余值。
例如
const [selection, setSelection] = useState<readonly string[]>([])
{[...selection,... workingDaysOptions.filter(v=>selection.includes(v))].map((option) => (...
然后,如果当您处理选择时,将其添加到数组的开头,它应该按预期工作。
setSelection(current=>[value,...setSelection])