React Material-UI Chip 在 Select 中的 onDelete 不起作用答案

【问题标题】：React Material-UI Chip's onDelete inside Select is not workingReact Material-UI Chip 在 Select 中的 onDelete 不起作用
【发布时间】：2019-12-29 19:50:42
【问题描述】：

我按照这里的 Chips 示例，为了将芯片渲染为 Select 的 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>

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

非常感谢！

【问题讨论】：

选择点击处理程序是否具有直接与芯片删除行为相矛盾的功能？
我不知道..似乎在单击删除图标时，菜单会捕获单击事件并忽略它，并且只打开选择菜单。
这很奇怪，它完全忽略了点击。通常问题是芯片上的点击处理程序会触发，但选择菜单也会触发。 developer.mozilla.org/en-US/docs/Web/API/Event/stopPropagation 很容易解决这个问题
没错，我知道如何处理两个组件都捕获事件的情况。但似乎菜单阻止了点击操作

标签： javascript material-ui

【解决方案1】：

Select组件拦截mousedown事件，所以添加

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

到您的Chip 组件。

【讨论】：

这可以解决问题，谢谢。请注意，此 pb 可能必须在 material-ui 跟踪器上报告，它曾经可以工作。
它有效，但我不喜欢它：/这就是我想的生活
这可以解决问题。但是，在单击外部时，选择不会失去焦点，我遇到了一些麻烦。关于如何解决这个问题的任何建议？
我在两个事件处理程序中尝试了 stopPropagation 和 preventDefault 的所有排列，并确定了以下内容，以便焦点突出显示不会卡住。 javascript onMouseDown={(event) => { event.stopPropagation(); event.preventDefault(); }} onDelete={(event) => { event.stopPropagation(); }}

【解决方案2】：

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

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

for继续选择中的焦点可以创建引用 selectRef = React.createRef(); 并调用 selectRef.current.focus(); 会将焦点重置到组件

【讨论】：