reactjs - React Bootstrap 表(版本 2): Adding Html Buttons

Question

这是我第一次使用 React Bootstrap table Version 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
        }];

我的渲染 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)。要显示按钮，只需从 formatter 函数返回一个 button 组件。

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