4

我不确定这是否不受支持，或者我是否还没有用Ag-Grid-React弄清楚这一点。

我的问题：我需要一个按钮组件在具有和作为道具的删除行列下的每个单元格中呈现。单击按钮后，我需要调度一个 Redux 操作，从我的表数据中删除当前行。onClicklabel

列定义：

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;

尽管已分配in ，但该组件确实可以访问和，但该Button组件不响应单击。onClickcellRendererParamsthis.props.labelthis.props.onClick

row似乎是undefined，那么在这种情况下，对于onClick处理程序来说，获取所选行数据的最佳方法是什么？

做这个的最好方式是什么？感谢您提供的任何帮助:)

4

1 回答 1

1

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

Button组件_

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

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

Button在反应组件中连接上述处理程序，如：

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

父 React 组件

在deleteRow父 React 组件的方法中，您可以获得rowIndex, 从而识别当前行（它会以我猜的状态表示）

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

连接deleteRowincolumnDefs看起来像：

const columnDefs = [
  {
    headerName: 'Delete Row',
    width: 100,
    cellRenderer: reactCellRendererFactory(Button),
    cellRendererParams: {
      onClick: this.deleteRow.bind(this), // <==== Hooking up deleteRow
      backgroundColor: 'red',
      label: 'Delete',
    },
  }, ...
于 2017-01-09T09:40:03.440 回答