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;

コンポーネントはに割り当てられているにもかかわらず、とにアクセスできますが、Buttonクリックに応答しません。onClickcellRendererParamsthis.props.labelthis.props.onClick

rowのように見えるので、この場合、ハンドラーundefinedの選択された行データを取得する最良の方法は何ですか?onClick

これを行う最善の方法は何ですか?あなたが貸すことができるどんな助けにも感謝します:)

4

1 に答える 1