Возврат значения из нажатой ячейки в Ag-Grid - PullRequest
Новая
       16

Возврат значения из нажатой ячейки в Ag-Grid

0 голосов
/ 16 апреля 2019

Я пытаюсь вернуть данные строки при нажатии на ячейку в 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

Ответы [ 2 ]

0 голосов
/ 17 апреля 2019

Почему бы вам не использовать обработчики событий ag-grids, в этом случае событие onCellClicked : 

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

Любое событие ячейки предоставит вам следующие параметры:

  • столбец: столбец
  • colDef: ColDef
  • значение: любое
0 голосов
/ 16 апреля 2019

Я не работал с 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)}
...