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

Posted 2023-02-18

【中文标题】如何在反应中更新按钮单击ag网格中的行

【英文标题】：how to update the row on button click in ag grid in react

【发布时间】：2022-01-16 22:29:03

【问题描述】：

我试图找到一种方法来更新单击按钮上的行，但我没有找到任何有用的东西。我正在尝试学习如何从前端使用 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;

【参考方案1】：

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

【讨论】：

如何在反应中使用 querySelectors。可以请你做并发布它

假设我们有一个 id，然后在更新函数中，使用类似这样的东西 const updateRow = document.queryselector(id) 现在你要更新这一行，现在看看数据在哪里想要更新，只需 console.log(updateRow) 现在找到该数据所在的位置然后更新它。

兄弟我听不懂你在说什么？我会得到 id 但我怎样才能把那个值放在网格中。

当你得到 id 时，你可以得到那个元素，现在看看那个元素的哪个 childNode 有你要更改的数据，到达那个 childNode 并更改它的 textContent，这是其中之一方式