MUI X Data Grid单元格按钮需两次点击激活的解决方法咨询

解决方案1：阻止按钮点击事件冒泡 #

修改按钮的onClick事件，添加e.stopPropagation()，避免事件被单元格的选中逻辑拦截，让按钮点击直接触发：

const renderTools = (params) =>
  <Tooltip title="Delete" placement="top" arrow>
    <IconButton onClick={(e) => {
      e.stopPropagation(); // 阻止事件向上冒泡到单元格
      confirmDelete(params.value);
    }}>
      <Iconify icon="solar:trash-bin-trash-bold"/>
    </IconButton>
  </Tooltip>

解决方案2：禁用列的点击事件冒泡 #

在tools列的配置中添加disableClickEventBubbling: true，让整个单元格的点击事件不触发DataGrid的默认选中逻辑：

const columns = [
  {field: 'user', renderCell: renderUser, headerName: '', width: 550},
  {
    field: "tools", 
    renderCell: renderTools, 
    headerName: '', 
    width: 100, 
    align: "right",
    disableClickEventBubbling: true
  }
]

为什么disableRowSelectionOnClick没用？ #

disableRowSelectionOnClick是控制点击行时是否触发行选中的属性，而你遇到的问题是单元格本身会拦截点击事件来处理单元格选中，所以这个属性无法解决当前问题。

内容的提问来源于stack exchange，提问作者user2445278