Question

这是我第一次使用React Bootstrap表版本2，我正在开始建立CMS，我的计划是将所有插入的邮件列出到数据表中。我已经列出了数据库中的所有值。但是，问题在于如何将按钮放在操作栏中。.我希望有人可以帮助我完成此操作。谢谢...

问题：关于 Action 列内的呈现按钮以及为什么功能按钮未显示在单元格内的问题。

我的目标是：获取每个用户的ID，当我单击该按钮时，它将链接链接到另一页面。

我的功能按钮：

 viewmail(cell, row){
    <Link to={"/view/mail/"+cell}><button className='btn btn-outline-primary btn lg'>Test</button></Link>    
 }

我的列代码：

const options = {
        paginationSize: 5,
        pageStartIndex: 1,
        firstPageText: 'First',
        prePageText: 'Back',
        nextPageText: 'Next',
        lastPageText: 'Last',
        nextPageTitle: 'First page',
        prePageTitle: 'Pre page',
        firstPageTitle: 'Next page',
        lastPageTitle: 'Last page',
        showTotal: true,
        paginationTotalRenderer: customTotal,
        sizePerPageList: [{
          text: '2', value: 2
        }, {
          text: '5', value: 5

        // }, {
        //   text: 'All', value: this.state.unread_mail_api.length
        }] // A numeric array is also available. the purpose of above example is custom the text
      };





        const { SearchBar } = Search;

        const columns = [{
            dataField: 'id',
            text: 'Id',
            sort: true
            }, {
            dataField: 'fullname',
            text: 'Full Name'
            }, {
            dataField:'subject',
            text: 'Subject'

            } ,{
            dataField: 'id',
            text: 'Action',
            dataFormat:this.viewmail
        }];

我的Render JSX：

<ToolkitProvider
keyField="id"
data={ this.state.unread_mail_api }
columns={ columns }

search
>
{
    props => (
    <div>
        <h3>Input something at below input field:</h3>
        <SearchBar { ...props.searchProps } />
        <hr />
        <BootstrapTable
        { ...props.baseProps }
        pagination={ paginationFactory(options) }
        />
    </div>
    )
}
</ToolkitProvider>

Answer 1

您可以从列的formatter属性中返回任何内容（字符串/ JSX）。要显示按钮，只需从button函数返回一个formatter组件即可。

看看专门为在列here中显示链接按钮而创建的代码沙箱。

Answer 2

我设法通过在列中添加formatter字段来解决以下类型的问题

{
    dataField: 'link',
    text: 'ACTION',
    formatter: (rowContent, row) => {
      return (    
        <a href="#">Check</a>
      )
    }
}

React Bootstrap Table（Version2）：添加HTML按钮

2 个答案: