Material UI 文档包括一个 multiple select 的示例。使用 Chip
呈现所选选项的位置组件使用 renderValue
支持Select
. Select
的标准行为组件是单击当前值会打开选项列表。
我正在尝试对此进行调整,以便 Chip
显示X
按钮,然后单击 X
应该立即从选择中删除该项目,而不是打开选项列表。
这似乎很容易,但我无法获得 onDelete
Chip
的事件开火。点击X
仍然只是打开Select
.
我怎样才能得到 onDelete
事件优先?根据我对事件冒泡的了解,它似乎是 Chip
应该先处理事件。
Code Sandbox Demo
代码:
const MultipleSelectDemo = () => {
const [personName, setPersonName] = React.useState<string[]>(initialSelected);
const handleChange = (event: React.ChangeEvent<{ value: unknown }>) => {
setPersonName(event.target.value as string[]);
};
// this never gets called
const handleDelete = (e: React.MouseEvent, value: string) => {
e.preventDefault();
console.log("clicked delete");
setPersonName((current) => _without(current, value));
};
return (
<div>
<FormControl>
<InputLabel id="demo-mutiple-chip-checkbox-label">
Chip + Check
</InputLabel>
<Select
labelId="demo-mutiple-chip-checkbox-label"
id="demo-mutiple-chip-checkbox"
multiple
value={personName}
onChange={handleChange}
onOpen={() => console.log("select opened")}
IconComponent={KeyboardArrowDownIcon}
renderValue={(selected) => (
<div>
{(selected as string[]).map((value) => (
<Chip
key={value}
label={value}
clickable
className={classes.chip}
onDelete={(e) => handleDelete(e, value)}
onClick={() => console.log("clicked chip")}
/>
))}
</div>
)}
>
{names.map((name) => (
<MenuItem key={name} value={name}>
<Checkbox checked={personName.includes(name)} />
<ListItemText primary={name} />
</MenuItem>
))}
</Select>
</FormControl>
</div>
);
}
最佳答案
Select
的开通由 mouse-down event 触发-- 不是点击事件。
当鼠标按下事件发生在 Chip
的删除图标上时,您可以通过停止传播鼠标事件来获得所需的行为。 :
<Chip
key={value}
label={value}
clickable
deleteIcon={
<CancelIcon
onMouseDown={(event) => event.stopPropagation()}
/>
}
className={classes.chip}
onDelete={(e) => handleDelete(e, value)}
onClick={() => console.log("clicked chip")}
/>
关于javascript - Material UI 多选中的可删除芯片,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/64670624/