Блог

Главная - Вопросы по программированию - Возвращает значение из выбранной ячейки в Ag-Grid

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

#reactjs #ag-grid #ag-grid-react

#reactjs #ag-grid #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

Комментарии:

1. предоставьте ссылку на plunk для вашей проблемы — чтобы поиграть с ней и решить ее

2. @Paritosh Я добавил это в исходное сообщение, но по какой-то причине сетка, похоже, отображается неправильно. Основная идея того, чего я пытаюсь достичь, все же есть.

Ответ №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 });
};

И передайте эту функцию через props, где вы вызываете этот компонент. Если дело только в том, что const вы также должны передавать реквизиты, нет?

 <ClickableCell data={this.state.data} value={?} onEvent={this.handleEvent)}
Метки: