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

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


reactjs ag-grid-react ag-grid
person blankface    schedule 16.04.2019    source источник
comment
предоставьте ссылку для решения вашей проблемы - поиграйте и решите ее   -  person Paritosh    schedule 16.04.2019
comment
@Paritosh Я добавил его в исходный пост, но по какой-то причине сетка не отображается правильно. Но основная идея того, чего я пытаюсь достичь, есть.   -  person blankface    schedule 17.04.2019

Ответы (2)


arrow_upward
1
arrow_downward

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

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

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

  • столбец: столбец
  • colDef: ColDef
  • значение: любое
person Alexander Zbinden    schedule 17.04.2019

arrow_upward
0
arrow_downward

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