AG-GridReact中的数组边界在用户在AG-Grid表格的可编辑字段中输入时未更新。 _编程开发

AG-GridReact中的数组边界在用户在AG-Grid表格的可编辑字段中输入时未更新。

创始人

2024-07-30 12:31:46

0次

通过useState钩子来更新数组：

import React, { useState } from 'react';
import { AgGridReact } from 'ag-grid-react';

const MyComponent = () => {
  const [rowData, setRowData] = useState([
    { name: 'David', age: 25 },
    { name: 'Jane', age: 22 }
  ]);
  
  const onCellValueChanged = (params) => {
    const updatedRowData = [...rowData];
    updatedRowData[params.rowIndex] = params.data;
    setRowData(updatedRowData);
  };
  
  const columnDefs = [
    { field: 'name', editable: true },
    { field: 'age', editable: true }
  ];
  
  return (
    
  );
};

通过useEffect钩子监听rowData的变化：

import React, { useState, useEffect } from 'react';
import { AgGridReact } from 'ag-grid-react';

const MyComponent = () => {
  const [rowData, setRowData] = useState([
    { name: 'David', age: 25 },
    { name: 'Jane', age: 22 }
  ]);
  
  const onCellValueChanged = (params) => {
    const updatedRowData = [...rowData];
    updatedRowData[params.rowIndex] = params.data;
    setRowData(updatedRowData);
  };
  
  const columnDefs = [
    { field: 'name', editable: true },
    { field: 'age', editable: true }
  ];
  
  useEffect(() => {
    console.log('rowData changed:', rowData);
  }, [rowData]);
  
  return (
    
  );
};

上一篇：AG-GridReactnolongerworkingwithcustomcss

下一篇：AG-GridReact：允许分页面板通过下拉菜单设置每页显示条目数，同时允许分页面板通过文本框设置当前页。

AG-GridReact中的数组边界在用户在AG-Grid表格的可编辑字段中输入时未更新。

相关内容

热门资讯