Как передать обработчик событий в качестве опоры в Ag-Grid-React?

Я не уверен, что это не поддерживается или я просто еще не понял этого с помощью Ag-Grid-React.

Моя проблема: мне нужно, чтобы компонент кнопки отображался в каждой ячейке в столбце Удалить строку с onClick и label в качестве свойств. После нажатия кнопки мне нужно отправить действие Redux, которое удаляет текущую строку из данных моей таблицы.

Параметры столбца:

import Button from '../button';
import { deleteRow } from './actions';
import { reactCellRendererFactory } from 'ag-grid-react';

const columnDefs = [
  {
    headerName: 'Delete Row',
    width: 100,
    cellRenderer: reactCellRendererFactory(Button),
    cellRendererParams: {
      onClick: (row) => deleteRow(row.data.id),
      backgroundColor: 'red',
      label: 'Delete',
    },
  }, ...

Компонент кнопки:

import React, { PropTypes, PureComponent } from 'react';
import RaisedButton from 'material-ui/RaisedButton';
import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider';

class Button extends PureComponent {
  static propTypes = {
    backgroundColor: PropTypes.string,
    label: PropTypes.string,
    labelColor: PropTypes.string,
    onClick: PropTypes.func,
  };

  static defaultProps = {
    backgroundColor: 'green',
    label: 'Save',
    labelColor: 'white',
  };

  render() {
    return (
      <MuiThemeProvider>
        <RaisedButton
          backgroundColor={this.props.backgroundColor}
          label={this.props.label}
          labelColor={this.props.labelColor}
          onClick={this.props.onClick}
        />
      </MuiThemeProvider>
    );
  }
}

export default Button;

Компонент Button не реагирует на щелчки, несмотря на присвоение onClick в cellRendererParams, хотя у него есть доступ к this.props.label и this.props.onClick.

row выглядит undefined, поэтому как лучше всего получить данные выбранной строки в этом случае для обработчика onClick?

Как лучше всего это сделать? Спасибо за любую помощь, которую вы можете оказать :)


reactjs redux react-redux ag-grid-react ag-grid
person kelsonic    schedule 13.12.2016    source источник

Ответы (1)


arrow_upward
1
arrow_downward

Я подозреваю, что обработчики кликов не привязаны к нужному приемнику. Могу я предложить несколько изменений, чтобы упростить рассуждение о коде:

Компонент Button

Вместо того, чтобы напрямую подключать обработчик кликов, попробуйте определить промежуточный обработчик в компоненте Button:

_onButtonClick(){
  this.props.onClick(this.props.rowIndex);
}

Подключите указанный выше обработчик к компоненту Button react, например:

onClick={this._onButtonClick.bind(this)}

Родительский компонент React

В методе deleteRow родительского компонента React вы можете получить rowIndex и тем самым идентифицировать текущую строку (я думаю, она будет представлена ​​в состоянии)

deleteRow(rowIndex) {
  //Perform actual delete of `rowIndex` in `this.state.data`
}

Подключение deleteRow к columnDefs будет выглядеть так:

const columnDefs = [
  {
    headerName: 'Delete Row',
    width: 100,
    cellRenderer: reactCellRendererFactory(Button),
    cellRendererParams: {
      onClick: this.deleteRow.bind(this), // <==== Hooking up deleteRow
      backgroundColor: 'red',
      label: 'Delete',
    },
  }, ...
person aquaraga    schedule 09.01.2017