React新手求助：点击按钮为ag-grid添加空行并直接提交数据至数据库

核心逻辑 #

1. 用React状态管理ag-grid的行数据，点击按钮时插入一条空行
2. 借助ag-grid的onCellValueChanged事件监听单元格编辑完成，触发数据库提交
3. 提交成功后更新本地行数据（比如补上数据库返回的真实ID）

完整代码示例 #

import { useState } from 'react';
import { AgGridReact } from 'ag-grid-react';
import 'ag-grid-community/styles/ag-grid.css';
import 'ag-grid-community/styles/ag-theme-alpine.css';

const GridAddRowSubmit = () => {
  // 初始化行数据，可替换为接口拉取的现有数据
  const [rowData, setRowData] = useState([
    { id: 1, name: '张三', age: 25 },
    { id: 2, name: '李四', age: 30 }
  ]);

  // 列配置，开启单元格编辑权限
  const columnDefs = [
    { field: 'name', editable: true, headerName: '姓名' },
    { field: 'age', editable: true, headerName: '年龄', type: 'number' },
    // 可根据需求添加更多列
  ];

  // 点击按钮添加空行
  const addEmptyRow = () => {
    // 用id: null标记未提交的新行
    const newRow = { id: null, name: '', age: '' };
    setRowData([...rowData, newRow]);
  };

  // 单元格编辑完成后提交数据
  const handleCellSubmit = async (params) => {
    const updatedRow = params.data;
    // 过滤未填写任何内容的空行，避免无效提交
    if (!updatedRow.name && !updatedRow.age) return;

    try {
      // 调用后端提交接口
      const res = await fetch('/api/save-row', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify(updatedRow)
      });

      if (res.ok) {
        const savedRow = await res.json();
        // 用数据库返回的真实数据替换本地临时行
        setRowData(rowData.map(row => 
          row.id === updatedRow.id ? savedRow : row
        ));
        alert('数据提交成功');
      } else {
        throw new Error('提交失败');
      }
    } catch (err) {
      console.error('提交出错:', err);
      alert('提交失败，请重试');
      // 提交失败时恢复单元格原有值
      params.api.refreshCells({ columns: [params.colDef.field], rowNodes: [params.node] });
    }
  };

  return (
    <div className="ag-theme-alpine" style={{ height: 400, width: 600 }}>
      <button onClick={addEmptyRow} style={{ marginBottom: 10 }}>添加新行</button>
      <AgGridReact
        rowData={rowData}
        columnDefs={columnDefs}
        onCellValueChanged={handleCellSubmit}
        // 给临时行生成唯一标识，避免ag-grid行跟踪混乱
        getRowId={params => params.data.id || `temp-${Date.now()}`}
      />
    </div>
  );
};

export default GridAddRowSubmit;

关键细节说明 #

• 空行标记：新增空行用id: null区分已提交行，方便后续提交后更新
• 提交时机：onCellValueChanged在用户结束单元格编辑（回车/点击其他单元格）时触发，确保拿到最新的行数据
• 错误恢复：提交失败时调用refreshCells恢复单元格原值，避免用户数据丢失
• 行标识：getRowId给临时行生成唯一ID，防止ag-grid因行数据重复出现渲染问题

额外提示 #

• 确保后端接口支持接收行数据，并返回包含生成ID的完整行信息
• 如果需要区分新行和已有行，可通过getRowStyle给新行添加特殊样式（比如浅灰色背景）
• 若担心频繁提交，可添加防抖逻辑，但你的需求是编辑后直接提交，单条提交更贴合场景

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