如何在ag-grid单元格渲染器reactjs中添加onclick事件并访问类函数

npm install ag-grid-community ag-grid-react react-dom

import React from 'react';

class CustomRenderer extends React.Component {
  handleClick = () => {
    // 在这里访问类函数
    this.props.someFunction();
  };

  render() {
    return (
      <div onClick={this.handleClick}>
        {/* 渲染单元格内容 */}
        {this.props.value}
      </div>
    );
  }
}

export default CustomRenderer;

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

class App extends React.Component {
  someFunction = () => {
    // 这是一个类函数，可以在onClick事件中访问
    console.log('点击了单元格');
  };

  render() {
    const columnDefs = [
      {
        headerName: '列标题',
        field: 'value',
        cellRendererFramework: CustomRenderer, // 使用自定义渲染器
      },
    ];

    const rowData = [
      { value: '单元格内容' },
    ];

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

export default App;