如何在反应 bootstrap 行事件中使用删除按钮执行删除功能？

Question

我有一个数据表示 React 中的 table。他们的最后两列分别用于编辑按钮和删除按钮。

我想要的是，当我按下删除按钮时，我想获取该行的索引，并根据该索引，我想获取一些数据来执行 Axios 调用。获取索引我使用 react bootstrap table rowEvents 如下。请查看以下代码片段并更正其应有的方式。

class ViewEmp extends React.Component{

    constructor(props) {
        super(props);
    }

    rowEvents = {
        onClick: (e, row, rowIndex) => {
           
        }
    };

    handleDelete = (e) =>{
       console.log("delete")
    }

    delete = () =>{
        return <Button color="danger" onClick={
        this.handleDelet}> Delete </Button>;
    }

   columns = [{
        dataField: 'emp_id',
        text: 'Employee ID'
    }, {
        dataField: 'firstName',
        text: 'First Name'
    },{
       text: 'Delete',
       formatter: this.delete
   }];

    render() {
       
        return (
            <Container style={{paddingTop: '10px', /*background: '#102454'*/}}>

                <Row style={{paddingTop: '10vh'}}>
                    <BootstrapTable
                        striped={true} hover={true}
                        keyField='emp_id'
                        data={ this.state.employeeList }
                        columns={ this.columns }
                        rowEvents={ this.rowEvents }
                        pagination={paginationFactory()}>

                    </BootstrapTable>
                    {component}

            </Row>
            </Container>
        );
    }
}
export default ViewEmp;

Answer 1

我花了几个小时才找到解决方案。实际上没有直接的功能或任何其他东西。只需在格式化程序中编写即可。

    const dealColumns = [
      // Other data columns
    
      {
      
        formatter: (cellContent, row) => {
          return (
            <button
              className="btn btn-danger btn-xs"
              onClick={() => this.handleDelete("name of a data field and this will return 
              the value of that cell")}
            >
              Delete
            </button>
          );
        },
      },
    ];
    
   handleDelete = (rowId) => {
      console.log(rowId);
    };

这是参考。 https://github.com/react-bootstrap-table/react-bootstrap-table2/issues/544

谢谢。

Answer 2

感谢@dasun_001，分享代码快速实现。注意：删除 cellContent 将不起作用。我没有做更多的研究。希望有人觉得它有用。

const dealColumns = [
  {
    dataField: "id",
    text: "No.",
  },
  {
    dataField: "name",
    text: "First Name",
  },
// columns follow dataField and text structure
  {
    dataField: "remove",
    text: "Delete",
    formatter: (cellContent, row) => {
      return (
        <button
          className="btn btn-danger btn-xs"
          onClick={() => handleDelete(row.id, row.name)}
        >
          Delete
        </button>
      );
    },
  },
];

const handleDelete = (rowId, name) => {
  console.log(rowId, name);
  //1 YourCellName
};

如何在反应 bootstrap 行事件中使用删除按钮执行删除功能？

how to do delete function with a delete button in react bootstrap row event?

delete-row

reactjs

react-bootstrap-table