如何更新反应中ag网格中按钮单击的行

Question

我正在前端应用程序中使用 AG-Grid，并且需要实现一种在用户单击行中的“编辑”按钮时更新行的方法。我已成功实现行删除，但需要行更新方面的帮助。

这是我对行删除所做的操作：

每行都有一个“删除”按钮。 单击“删除”按钮时，我使用 api.updateRowData({ remove: [selectedRowData] }) 从 AG-Grid 中删除该行。 现在，我需要有关如何在单击“编辑”按钮时更新行的指导。具体来说，我想：

单击“编辑”按钮时提取所选行的数据。 以表单或模式显示此数据以允许用户进行修改。 使用修改后的数据更新 AG-Grid。 我怎样才能实现这个目标？任何见解或代码示例将不胜感激。

import { useEffect, useState } from "react";
import axios from "axios";
import { AgGridReact } from 'ag-grid-react';
import React from 'react';
import 'ag-grid-community/dist/styles/ag-grid.css';
import 'ag-grid-community/dist/styles/ag-theme-alpine.css';

function Read(props) {
  const [record, setRecord] = useState('');

  useEffect(() => {
    axios.get('https://jsonplaceholder.typicode.com/comments')
    .then((response) =>{
      console.log(response.data);
      setRecord(response.data);
    })
  }, [])

  function update(data){
    console.log("hello");
  }

const col= [
    { headerName: "Name", field: "name"},
    { headerName: "Email", field: "email"},
    { headerName: "Body", field: "body"},
    {headerName: "", headerClass: 'new-class',
        cellRendererFramework:(params)=>
        <div>
                  <button onClick={() => update(params.data)}>Edit</button>
        </div>}
  ]

  return (
    <>
        <div className="ag-theme-alpine" style={{height:'400px',
        width: '700px'}}>
        <AgGridReact
            columnDefs={col}
            rowData={record}
            >
        </AgGridReact>
      </div>
    </>
  );
}

export default Read;

Answer 1

为其分配一个 id，然后使用更新函数传递 id。然后您可以使用 querySelectors 获取该字段并更新它