从 Ag-Grid 中单击的单元格返回值

Posted 2023-03-28

【中文标题】从 Ag-Grid 中单击的单元格返回值

【英文标题】：Returning the value from the clicked cell in Ag-Grid

【发布时间】：2019-09-06 04:52:36

【问题描述】：

我正在尝试在 ag-Grid 中单击单元格时返回行数据。我已经定义了以下组件，我将其传递到下方显示的cellRendererFramework。

import  ICellRendererParams  from "ag-grid-community";
import * as React from "react";
import  CellValue  from "./ClickableCell.style";

export default class ClickableCell extends React.Component<ICellRendererParams> 
    public render() 
        return (
            // this works when the clickable cell is clicked
            // but i'm trying to return this data to the component that will be rendering the grid
            <div onClick=() => console.log(this.props.data)>
                this.props.value
            </div>
        );
    

以下是在定义列标题和行数据的组件中。

const headers = [
     headerName: "Name", field: "name", cellRendererFramework: ClickableCell ,
     headerName: "Age", field: "age" ,
];

如何在定义标题的组件中接收单击的行数据？谢谢！

编辑：

我添加了代码的一些工作版本：https://codesandbox.io/s/7qlvyk901

【问题讨论】：

为您的问题提供 plunk 链接 - 尝试解决它

@Paritosh 我已将其添加到原始帖子中，但由于某种原因，网格似乎无法正确呈现。不过，我想要实现的基本理念就在那里。

【参考方案1】：

为什么不使用 ag-grids 事件处理程序，在本例中是 onCellClicked 事件：

    <AgGridReact
      onCellClicked=this.onCellClicked
      columnDefs=this.props.Headers
      rowData=this.props.Data
    />

任何单元格事件都会为您提供以下参数：

栏目：栏目 colDef: ColDef 值：任意

【参考方案2】：

我没有与 Ag-Grid 合作过，但我会在 ClickableCell 中引发一个事件并让父亲处理该事件。

export default class ClickableCell extends React.Component<ICellRendererParams> 
    public render() 
        return (
            <div onClick=() => this.props.onEvent(this.props.data)>
                this.props.value
            </div>
        );
    

然后在父组件上，我将定义处理该事件并保存在状态中的函数。

handleEvent = data => 
  console.log(data);
  this.setState( data );
;

并通过调用该组件的道具传递该函数。如果它只是在那个const 你应该也传递道具不是吗？

<ClickableCell data=this.state.data value=? onEvent=this.handleEvent)