反应材料-UI芯片的onDelete内部选择不工作

Question

我在这里学习了芯片示例，以便将芯片呈现为选择的renderValue：

https://material-ui.com/components/selects/

但是，当我将onDelete添加到芯片中时，为了在一次单击中删除芯片，我可以看到关闭的图标，但没有调用(因为选择的菜单显示)。

​

<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>

​

当我将芯片放在select之外时，会调用delete事件。你认为我能做些什么来防止菜单在点击时打开的行为？

非常感谢!

Answer 1

Select组件拦截mousedown事件，因此添加

onMouseDown={(event) => {
  event.stopPropagation();
}}

到您的Chip组件。

Answer 2

是的，它可以工作，停止在芯片组件中的传播。

onMouseDown={(event) => {
 event.stopPropagation();
}}

对于继续，选择中的焦点可以创建引用selectRef = React.createRef();并调用selectRef.current.focus();，它将焦点重置为组件