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

【问题标题】：Returning the value from the clicked cell in Ag-Grid从 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 我已将其添加到原始帖子中，但由于某种原因，网格似乎无法正确呈现。不过，我想要实现的基本理念就在那里。

标签： reactjs ag-grid ag-grid-react

【解决方案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)}

【讨论】：