如何在Ag-grid中逐行添加特定元件(如Input component)，或者如何在Ag-grid中逐行删除元件？

import { Component } from 'react';

class InputRenderer extends Component {
  constructor(props) {
    super(props);
    this.handleChange = this.handleChange.bind(this);
  }

  handleChange(event) {
    const { value } = event.target;
    this.props.api.stopEditing();
    // 在这里可以处理输入值的逻辑
  }

  render() {
    const { value } = this.props;

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

export default InputRenderer;

{
  headerName: 'Input',
  field: 'input',
  cellRendererFramework: InputRenderer,
}

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

import 'ag-grid-community/dist/styles/ag-grid.css';
import 'ag-grid-community/dist/styles/ag-theme-alpine.css';

import InputRenderer from './InputRenderer';

const App = () => {
  const columnDefs = [
    // ...其他列定义
    {
      headerName: 'Input',
      field: 'input',
      cellRendererFramework: InputRenderer,
    },
  ];

  const rowData = [
    // ...数据行
  ];

  return (
    <div className="ag-theme-alpine" style={{ height: 400, width: 600 }}>
      <AgGridReact
        reactNext={true}
        columnDefs={columnDefs}
        rowData={rowData}
      />
    </div>
  );
}

export default App;

import { Component } from 'react';

class DeleteEditor extends Component {
  constructor(props) {
    super(props);
    this.handleClick = this.handleClick.bind(this);
  }

  handleClick() {
    const { data, api } = this.props;
    // 在这里可以处理删除逻辑
    // 例如，可以根据data中的某个属性来判断是否删除
    api.stopEditing();
  }

  render() {
    return (
      <button onClick={this.handleClick}>删除</button>
    );
  }
}

export default DeleteEditor;

{
  headerName: 'Delete',
  cellEditorFramework: DeleteEditor,
  editable: true,
}