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

Question

我最近开始使用 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, row, rowIndex)} data-id={cell} title='Edit'></span>
            <span className='fa fa-trash-o' data-id={cell} onClick={() => this.props.parentDelete(cell, row, 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', sort: true },
            { text: 'User Name', dataField: 'UserName', sort: true },
            { text: 'Created', dataField: 'DateCreatedView', sort: true },
            { text: 'Email Confirmed', dataField: 'EmailConfirmed', sort: true },
            ]
        }
        
        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 元素中设置数据和列元素

标签： reactjsreact-bootstrapreact-bootstrap-table