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

Question

我试图找到一种方法来更新单击按钮上的行，但我没有找到任何有用的东西。我正在尝试学习如何从前端使用 ag 网格进行基本的 crud，我找到了一种删除行的方法，这很容易，但对于更新，我没有找到任何有用的东西。所以如果有人知道该怎么做，请告诉我

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获取该字段并更新它