MUI X Data Grid行删除按钮失效，如何实现行删除功能？

问题根源 #

你的代码存在两个核心问题导致删除功能失效：

• 依赖行索引删除不可靠：DataGrid的行索引会随排序、筛选等操作动态变化，用index作为删除依据会出现删错行或删除无响应的情况
• Tooltip嵌套顺序错误：你将Tooltip放在IconButton内部，会导致点击事件被Tooltip拦截，同时hover提示也无法正常触发

修复方案 #

1. 改用唯一ID删除：既然已经通过getRowId={row => row.id}设置了行的唯一标识，直接用todo的id过滤数组才是稳定可靠的方式
2. 调整Tooltip嵌套结构：将IconButton包裹在Tooltip内部，确保交互逻辑正常
3. 优化deleteTodo函数：接收todo的id作为参数，通过匹配id过滤待办数组

修正后的完整代码 #

import React, { useState } from 'react';
import './App.css';
import Button from '@mui/material/Button';
import TextField from '@mui/material/TextField';
import AppBar from '@mui/material/AppBar';
import Toolbar from '@mui/material/Toolbar';
import Typography from '@mui/material/Typography';
import IconButton from '@mui/material/IconButton';
import DeleteIcon from '@mui/icons-material/Delete';
import Tooltip from '@mui/material/Tooltip';
import SaveIcon from '@mui/icons-material/Save';
import { DataGrid } from '@mui/x-data-grid';

export default function App() {
  const [todo, setTodo] = useState({description: '', date: ''});
  const [todos, setTodos] = useState([]);

  const inputChanged = (event) => {
    setTodo({...todo, [event.target.name]: event.target.value});
  }

  const addTodo = () => {
    const newTodo = {...todo, id: new Date().toString()}
    setTodos([...todos, newTodo]);
    setTodo({description: '', date: ''});
  }

  // 改为接收id参数，通过id匹配过滤数组
  const deleteTodo = (todoId) => {
    setTodos(todos.filter(todo => todo.id !== todoId));
  }

  const columns = [
    {field: 'description', headerName: 'Description', width: 200},
    {field: 'date', headerName: 'Date', width: 200},
    {
      field: "actions",
      headerName: "Actions",
      width: 120,
      sortable: false,
      // 从renderCell参数中获取row对象，直接传入row.id
      renderCell: ({row}) => {  
        return (
          // 调整Tooltip与IconButton的嵌套顺序
          <Tooltip title="Delete todo">
            <IconButton     
              size='small'
              color='error'      
              onClick={() => deleteTodo(row.id)}>
              <DeleteIcon />
            </IconButton>
          </Tooltip>
        )
      }
    }
  ]

  return (
    <div className="App">
      <AppBar position="static">
        <Toolbar>
          <Typography variant="h6">
            Todolist
          </Typography>
        </Toolbar>
      </AppBar>
      <TextField 
        style={{marginRight: 10}}
        variant="standard" 
        label="Description" 
        name="description" 
        value={todo.description} 
        onChange={inputChanged} 
      />
      <TextField 
        variant="standard"
        style={{marginRight: 10}} 
        label="Date" 
        name="date" 
        value={todo.date} 
        onChange={inputChanged}
      />
      <Button 
        style= {{margin: 10}} 
        startIcon={<SaveIcon />}
        color="primary" 
        variant="outlined" 
        onClick={addTodo}>
        Add
      </Button>
      <div style={{ height: 300, width: '40%', margin: 'auto' }}>
        <DataGrid
          rows={todos}
          columns={columns}
          getRowId={row => row.id}
        />
      </div>
    </div>
  );
}

额外优化点 #

• 将操作列的field从空格改为actions，语义更清晰
• 缩小操作列宽度，让布局更紧凑合理

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