在“编辑”按钮上的“编辑行”中单击“ react-bootstrap-table-next”

Question

我正在尝试使用'react-bootstrap-table-next'实现一个表。 我希望仅在单击“编辑”按钮后才可编辑该行。当前，单击单元格的代码会将单元格更改为可编辑的单元格。

我想要实现的屏幕截图。

我的代码：

import BootstrapTable from 'react-bootstrap-table-next'
import cellEditFactory from 'react-bootstrap-table2-editor';

 const buttonFormatter = (cell, row) => {
    console.log(cell,row)
    return <Button onClick={()=>{editTenantHandler(cell,row)}}><FaEdit/></Button>;
}

  const columns = [{
    dataField: 'tenantName',
    text: 'Tenant Name',
    headerStyle: {
      color: 'white'
    }
  }, {
    dataField: 'email',
    text: 'Email',
    headerStyle: {
      color: 'white'
    }
  }, {
      dataField: 'mobile',
      text: 'Mobile',
      headerStyle: {
        color: 'white'
      }
    },
    {
      dataField: 'actions',
      text: 'Actions',
      isDummyField: true,
      csvExport: false,
      formatter: buttonFormatter,
      headerStyle: {
        color: 'white'
      }
    }];

  <BootstrapTable 
     keyField='tenantName' 
     data={ props.tenants } 
     columns={ columns } 
     cellEdit={ cellEditFactory({mode: 'click'}) }/>