如何在react bootstrap row事件中使用删除按钮执行删除功能?

问题描述

我在React中有一个表示表的数据。最后两列分别是编辑按钮和删除按钮。

我想要的是当我按下Delete按钮时,我想要获取该行的索引,并根据该索引,我想要获取一些数据来执行Axios调用获取索引我使用react引导表 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;

解决方法

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

    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

谢谢。

,

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

sapply(names(listofdf),function (x) write.table(listofdf[x],file = paste(names(listofdf)[x],".csv",sep=""),row.names = FALSE))

相关问答

Selenium Web驱动程序和Java。元素在(x,y)点处不可单击。其...
Python-如何使用点“。” 访问字典成员?
Java 字符串是不可变的。到底是什么意思?
Java中的“ final”关键字如何工作?(我仍然可以修改对象。...
“loop:”在Java代码中。这是什么,为什么要编译?
java.lang.ClassNotFoundException:sun.jdbc.odbc.JdbcOdbc...