Javascript 不要在图标上选择菜单项在材质界面中单击选择

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

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

使用

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

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