reactjs - 如何使用单元格渲染器中的按钮删除 ag-grid 行

Question

用于 CRUD 应用程序的网格。
我有一些像这样显示在 ag-grid 表中的数据


我使用 ag-grid 单元渲染器来渲染那个按钮

import React, { Component } from 'react';

export default class DeleteButton extends Component {
    render() {
        return (
            <span><button onClick={}>X</button></span>
        );
    }
}

我像这样将数据和列定义存储在组件的状态中

    this.state = {
        rewData : [
            {make: "Toyota", model: "Celica", qty:12, price: 35000,  test:"", image:""},
            {make: "Ford", model: "Mondeo", qty:1, price: 32000,  test:"", image:""},
            {make: "Porsche", model: "Boxter", qty:8, price: 72000, test:"", image:""},
            {make: "Porsche", model: "Boxter", qty:8, price: 72000,  test:"", image:""}
        ],
    columnDefs:[
{"headerName":"Make","field":"make","cellEditor":"textCellEditor","cellEditorParams":{"required":true}},
{"headerName":"Model","field":"model","cellEditor":"multiLineTextCellEditor","cellEditorParams":{"required":true}},
{"headerName":"Qty","field":"qty","cellEditor":"numericCellEditor","cellEditorParams":{"required":true}},
{"headerName":"Price","field":"price","cellEditor":"numericCellEditor","cellRenderer":"currencyCellRenderer","cellEditorParams":{"required":true}},
{"headerName":"test","field":"test","cellEditor":"manyToOneCellEditor","cellEditorParams":{"model":"account","host":"http://localhost:8282","fieldAsLabel":"name","fieldAsValue":"id","required":true}},
{"headerName":"image","field":"image","cellEditor":"fileUploadCellEditor","cellRenderer":"imageCellRenderer","cellEditorParams":{"required":true}},
{"headerName":"Delete","cellRenderer":"deleteButton"}
]
        }

并在 ag-grid 的 rowData Prop 中传递它:

<AgGridReact
    defaultColDef={defaultColDef}
    columnDefs={this.state.columnDefs}
    rowData={this.state.rowData}
    onGridReady={this.onGridReady}
    onCellValueChanged={this.handleChange}
    frameworkComponents={this.state.frameworkComponents}
    singleClickEdit={true}
    stopEditingWhenGridLosesFocus={true}
    reactNext={true}
/>

当我单击删除按钮时，我想删除相应的行以及其他内容，例如验证或向用户显示通知等

我如何使该按钮工作更改 rowData 的状态？

我把改变 rowData 状态的方法放在哪里？

Answer 1

this.gridApi.updateRowData将收到 rowNode在对象数组中

export default class DeleteButton extends Component {
    render() {
        return (
            <span><button onClick={() => this.buttonClick(this.props.node)}>X</button></span>
        );
    }
}

buttonClick = (e) => {

*// e is getting the current node (Row Node)*

        this.setState({
            visible:true
        })
        let deletedRow = this.props.node.data;
        e.gridApi.updateRowData({ remove: [deletedRow] })  // It will update the row
    };