我在这里遵循 Chips 示例,以便将芯片渲染为 Select 的 renderValue:
https://material-ui.com/components/selects/
但是,当我在芯片上添加onDelete时,为了一键删除芯片,可以看到关闭图标,但是没有调用delete事件(因为Select的菜单显示)。
<Select
multiple
value={selectedProducts}
onChange={handleProductsSearchChange}
renderValue={selected => (
<div className={classes.chips}>
{selected.map(value => (
<Chip key={value} label={find(FAKE_PRODUCTS, {id: value}).name}
onDelete={() => handleDeleteSearchProduct(value)}
className={classes.chip} />
))}
</div>)}
MenuProps={{ PaperProps: {
style: {
maxHeight: 48 * 4.5 + 8,
width: 250,
}
}
}}
>
{menuItems}
</Select>Run Code Online (Sandbox Code Playgroud)
当我将芯片放在选择之外时,将调用删除事件。您认为我可以做些什么来防止单击时打开菜单的行为?
非常感谢!