如何在Ag-Grid-React中将事件处理程序作为prop传递？

Question

我不确定这是否不受支持，或者我是否还没有用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处理程序获取所选行数据的最佳方法是什么？

最好的方法是什么？感谢您提供的任何帮助：）

Answer 1

我怀疑点击处理程序没有绑定到正确的接收器。我可以提出一些更改，以便更容易推理代码：

Button组件

不要直接连接点击处理程序，而是尝试在Button组件上定义临时处理程序：

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

将Button反应组件中的上述处理程序连接起来，如：

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

父React组件

在父React组件的deleteRow方法中，您可以获取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',
    },
  }, ...