これがサポートされていないのか、それともAg-Grid-Reactでこれをまだ理解していないのかはわかりません。
私の問題:ボタン コンポーネントを、小道具としてとを持つ行の削除列の下の各セルにレンダリングする必要があります。ボタンがクリックされたら、テーブルのデータから現在の行を削除する Redux アクションをディスパッチする必要があります。onClick
label
列定義:
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
これを行う最善の方法は何ですか?あなたが貸すことができるどんな助けにも感謝します:)