我設(shè)法用粘性菜單項制作了一個Material-ui選擇的工作解決方案。
使用 MaterialUI MenuItem 而不是所有<li> <ul> <ListSubheader>
const [isOpen, setIsOpen] = useState(false);
const [value, setValue] = useState();
const onToggle = () => {
setIsOpen((prev) => !prev);
};
const onClose = () => {
setIsOpen(false);
};
const _onChange = (event: React.ChangeEvent<{ value: unknown }>) => {
const valueToSelect = event.target.value as Value;
if (
isResetSeletced(valueToSelect) ||
(multiple
? !valueToSelect.length ||
valueToSelect.length < minSelections ||
(valueToSelect as string[]).some((option) => !option)
: !valueToSelect?.length && minSelections > 0)
) {
return;
}
event.persist();
onChange(valueToSelect);
};
const renderValue = (selected: any) => {
if (!selected.length) {
return '';
}
if (multiple) {
const isReachedLimit = selected.length > MAX_SELECTIONS;
const hiddenTags = isReachedLimit ? (
<span>+{value.length - MAX_SELECTIONS}</span>
) : null;
const selectionsToShow = isReachedLimit
? selected.slice(0, MAX_SELECTIONS)
: selected;
return (
<StyledTagsContainer>
<Tags values={selectionsToShow} onRemoveTag={onRemoveTag} />
{hiddenTags}
</StyledTagsContainer>
);
}
return selected;
};
const resetMenuItem = secondaryOptions?.map((resetItem, index) => {
return (
<MenuItem
key={resetItem.value + index}
onClick={() => {
resetItem.onClick();
}}
isLast={!index}
isSelected={
resetItem.value === resetSelected?.value ||
resetItem.value === value ||
(multiple && resetItem.value === value[0])
}
value={resetItem.value}
icon={<RadioIcon />}
>
{resetItem.text}
</MenuItem>
);
});
<Select
displayEmpty
onClose={onClose}
value={value}
onChange={_onChange}
renderValue={renderValue}
open={isOpen}
>
{menuItems}
<div style={{ position: 'sticky', bottom: 0 }}>
{resetMenuItem}
</div>
</Select>
