从ag-grid自定义渲染器更新React组件的状态

import { BaseComponent } from 'ag-grid-react';

const CustomRenderer = (props) => {
  const [value, setValue] = useState(props.value);

  const handleChange = (event) => {
    setValue(event.target.value);
  };

  return (
    <input type="text" value={value} onChange={handleChange} />
  );
};

export default CustomRenderer;

const columnDefs = [
  {
    headerName: 'Column',
    field: 'column',
    cellRendererFramework: CustomRenderer,
  },
  // 其他列定义...
];

import { AgGridReact } from 'ag-grid-react';

const MyGrid = () => {
  const rowData = [
    { column: 'Value 1' },
    { column: 'Value 2' },
    // 其他数据...
  ];

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

export default MyGrid;