Question

在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

Answer 1

我没有与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 });
};

并通过调用该组件的props传递该函数。如果只是在const中，您还应该通过道具吗？

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

Answer 2

为什么不使用ag-grids事件处理程序，在这种情况下为 onCellClicked 事件：

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

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

列：列
colDef：ColDef
值：任意

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

2 个答案: