不要选择菜单项上的图标单击材料ui选择

Question

我正在制作具有删除菜单功能的下拉菜单，但是当我单击菜单项中的图标菜单项时也会被选中，如何防止这种默认行为 这是我的代码

{
                    dropdowns.categories && dropdowns.categories.map((data, index) => {
                      return <MenuItem
                        key={index}
                        className="d-flex justify-content-between"
                        style={{ width: "170px" }}
                        value={data}>
                        {data}
                        <IconButton
                          style={{ position: "absolute", right: "0px" }}
                          onClick={() => deleteItem(data, "categories")}
                          className="icon-button">
                          <i className="fa fa-trash"></i>
                        </IconButton>
                      </MenuItem>
}

Answer 1

使用event.stopPropagation()。

Event接口的stopPropagation（）方法可防止当前事件在捕获和冒泡阶段的进一步传播。

onClick={event => {
    event.stopPropagation();
    deleteItem(data, "categories");
}