react-bootstrap-table-next搜索不起作用

问题描述

我最近开始使用react-bootstrap-table-next组件。我无法使搜索生效。

这是我安装的：

react-bootstrap-table-next 4.0.3
react-bootstrap-table2-paginator 2.1.2
react-bootstrap-table2-toolkit 2.1.3

这是我的代码：

import BootstrapTable from 'react-bootstrap-table-next';
import 'react-bootstrap-table-next/dist/react-bootstrap-table2.min.css';
import paginationFactory from 'react-bootstrap-table2-paginator';
import ToolkitProvider,{ Search } from 'react-bootstrap-table2-toolkit';

actionFormat(cell,row,rowIndex) {
        return (<div><span className='fa fa-pencil-square-o' onClick={() => this.props.parentEdit(cell,rowIndex)} data-id={cell} title='Edit'></span>
            <span className='fa fa-trash-o' data-id={cell} onClick={() => this.props.parentDelete(cell,rowIndex)} title='Delete'></span></div>)
}

render() {    
        if (this.props.isAccount) {
            cols = [{ text: 'Actions',datafield: 'Actions',formatter: this.actionFormat.bind(this) },{ text: 'Id',datafield: 'Id',sort: true },{ text: 'Name',datafield: 'Name',{ text: 'User Name',datafield: 'UserName',{ text: 'Created',datafield: 'DateCreatedView',{ text: 'Email Confirmed',datafield: 'EmailConfirmed',]
        }
        
        const { SearchBar } = Search;        
        return (
                <Container fluid>
                    <ToolkitProvider
                        keyField="Id"
                        data={this.state.data}
                        columns={cols}
                        search
                        bootstrap4
                    >
                        {
                            props => (
                                <div>
                                    Search:
                                    <SearchBar {...props.searchProps} />
                                    <BootstrapTable bootstrap4 pagination={paginationFactory(pagingOptions)} width='100vw;'
                                    striped condensed {...props.baseProps}>
                                </BootstrapTable>
                                </div>
                            )
                        }
                    </ToolkitProvider>
        );
    }

参考ToolkitProvider中的基本道具，而不是在BootstrapTable元素中设置数据和列元素

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）