onClick 事件不会在单击时触发，但在第二次单击时触发

Question

我在 React.js 中使用 MUI DataGrid 并传递一些列，包括用于执行操作的这一列。一切正常，图标显示正确。但是，onClick 事件并不总是在单次单击时触发。有时它们在第一次单击时起作用，但其他时候我需要单击两次。此问题影响所有图标按钮。我该如何解决这个问题？

行动专栏

{
      flex: 0.1,
      minWidth: 150,
      sortable: false,
      field: "actions",
      headerName: "",
      renderCell: ({ row }) => (
        <Box>
          <IconButton color="primary" aria-label="View Details" tabIndex={0} title="View Details">
            <Icon icon='tabler:eye' onClick={ () => {navigate(`/employees/detail/${row.id}`);}} />
          </IconButton>
          <IconButton color="main" aria-label="Edit" tabIndex={0} onClick={() =>{handleEditEmployee(row.id)}} title="Edit">
            <Icon icon='tabler:pencil' />
          </IconButton>
          <IconButton color="error" aria-label="Delete" tabIndex={0} onClick={() =>{showConfirmation(row.id)}} title="Delete">
            <Icon icon="tabler:trash" />
          </IconButton>
        </Box>        
      ),
    }

MUI 依赖项：

• “@mui/icons-material”：“^5.16.0”
• “@mui/lab”：“^5.0.0-alpha.173”
• “@mui/material”：“^5.16.0”
• “@mui/x-data-grid”：“^7.11.0”
• “@mui/x-date-pickers”：“^7.12.1”
• “@mui/x-tree-view”：“^7.20.0”

数据网格：

<DataGrid
          editMode="row"
          autoHeight
          pagination
          rows={filteredRows}
          rowHeight={62}
          columns={columns}
          checkboxSelection
          pageSizeOptions={[5, 10]}
          disableRowSelectionOnClick
          paginationModel={paginationModel}
          onPaginationModelChange={setPaginationModel}
          onRowSelectionModelChange={(newSelectionModel) => {
            handleGridSelection(newSelectionModel);
          }}
          hideFooterSelectedRowCount
          getRowId={(row) => row.id}                                 
          processRowUpdate={(updatedRow, originalRow) => handleRowDataChange(updatedRow, originalRow)}
          onProcessRowUpdateError={handleProcessRowUpdateError}     
          sx={{
            '& .MuiDataGrid-columnHeaderTitle': {
              textTransform: 'none', // This will disable the capitalization
            },
          }} 
          slots={{
            noRowsOverlay: NoRowsOverlay,
          }} 
          initialState={{
            sorting: {
              sortModel: [{ field: 'Fullname', sort: 'asc' }],
            },
          }}   
        />

处理程序

const handleEditEmployee = (id) => {
    resetEmployee();
    let emp = getEmployeeById(id);    
    setEmployee(emp);
    setModalData({title:'Edit Employee', btnTxt:'Save Changes', successTitle:'Updated!', successTxt:'Employee information successfully updated.'})
    setOpenNewCustomerDlg(true);
  }
const handleDeleteEmployee = async (empID, Name) =>{    
      try {
        const result = await DeleteEmployee(empID,navigate);
        if (result && result.form) {
          console.error(result.form);
          console.log(result.form);
        } else {
          console.log('Employee deleted successfully!'); 
          Swal.fire(
            {
              title: 'Deleted!',
              text: `${Name} has been deleted.`,
              icon: 'success',
              confirmButtonColor: '#23a26d', 
            }         
          );
          fetchData();       
        }
      } catch (error) {
        console.error('Error deleting employee:', error);      
      }
  }

const showConfirmation = (id, Name) => {
MySwal.fire({
  title: 'Are you sure?',
  text: "You won't be able to revert this!",
  icon: 'warning',
  showCancelButton: true,
  confirmButtonColor: '#23A26D',
  cancelButtonColor: '#d33',
  confirmButtonText: 'Yes, delete it!',
  cancelButtonText: 'Cancel',
}).then((result) => {
  if (result.isConfirmed) {
    // Perform delete action here
    handleDeleteEmployee(id,Name);        
  }
});

};

Answer 1

尝试用以下内容替换您的操作列，我认为这是正确的方法：

{
      field: 'actions',
      headerName: 'Actions',
      width: 150,
      type: 'actions',
      getActions: ({ id }) => [
        <GridActionsCellItem
          icon={<EyeIcon />}
          label="View Details"
          onClick={() => navigate(`/employees/detail/${id}`)}
          color="inherit"
        />,
        <GridActionsCellItem
          icon={<EditIcon />}
          label="Edit"
          onClick={() => handleEditEmployee(id)}
          color="inherit"
        />,
        <GridActionsCellItem
          icon={<DeleteIcon />}
          label="Delete"
          onClick={() => showConfirmation(id)}
          color="inherit"
        />,
      ],
},