迭代反应 ag-grid 的特定行

Question

我得到了一个带有按钮的ag-grid呈现在专用列中（意味着每一行在该列下方的一侧都有一个按钮）。 我已经这样做了：

const columnDefinition = [
                          {headerName: '', cellRenderer: 'editButton'},
                          {headerName: "Key", field: "Key"},
                          {headerName: "Value", field: "Value"}];

const overlayParams = {
  frameworkComponents: {
                        editButton: EditMagnifierButton, //EditMagnifierButton is a react functional component which renders a button
                       }
return (
 <Ag-Grid-React
     rowData={myRowData}
     columnDefs={columnDefinition} 
     {...overlayParams} />
);

我想知道如何遍历用户单击按钮的行并获取该行每一列中的所有值，以便我可以将它们作为道具传递给另一个组件。

EditMagnifierButton ：

const EditMagnifier = (props) =>
{
    return (
        <IconButton iconSvg={search} />
    )
}

Answer 1

如 ag-Grid 文档中所述，ag-Grid 将一些默认道具传递给每个单元格渲染器，这些道具的格式为ICellRendererParams ，

 interface ICellRendererParams { value: any, // value to be rendered valueFormatted: any, // value to be rendered formatted getValue: () => any, // convenience function to get most recent up to date value setValue: (value: any) => void, // convenience to set the value formatValue: (value: any) => any, // convenience to format a value using the column's formatter data: any, // the row's data node: RowNode, // row node colDef: ColDef, // the cell's column definition column: Column, // the cell's column rowIndex: number, // the current index of the row (this changes after filter and sort) api: GridApi, // the grid API eGridCell: HTMLElement, // the grid's cell, a DOM div element eParentOfValue: HTMLElement, // the parent DOM item for the cell renderer, same as eGridCell unless using checkbox selection columnApi: ColumnApi, // grid column API context: any, // the grid's context refreshCell: () => void // convenience function to refresh the cell }

详细信息请参见https://www.ag-grid.com/javascript-grid-cell-rendering-components/#cell-renderer-component

因此，有一个名为data的属性指向 rowData 指向存在单元格渲染器的索引（在本例中为单击的索引）。

所以你的单元格渲染器可以直接使用这个道具作为props.data ，

 /* Here the props will point to ICellRendererParams */ const EditMagnifier = (props) => { const printRowData = (event) => { /* This will give you the complete row data for the clicked row*/ console.log(props.data); } return ( <IconButton iconSvg={search} onClick={printRowData}/> ) }