React-Bootstrap-Table-Next搜索栏onSearch不是函数

Question

我用以下代码导入了SearchBar.js。从“react-bootstrap-Table2- ToolkitProvider”中导入搜索，我确认该文件存在，并将其放在下面。我可以在我的页面上看到搜索栏和clear按钮，但当我尝试搜索某些内容时，它显示onSearch不是一个函数。

const { SearchBar, ClearSearchButton } = Search;
const Columnlist = props => {
  //add filterFactory into bootstrap table
  return (
    <div style={{ padding: "20px" }}>
      <h1 className="h2">Variables</h1>
      <SearchBar {...props.searchProps} />
      <ClearSearchButton />
      <BootstrapTable
        keyField="id"
        data={data}
        columns={columns}
        striped
        hover
        condensed
        search
        noDataIndication="No Variable Meets Search Requirements"
        pagination={paginationFactory()}
        filter={filterFactory()}
      />
    </div>
  );
};

export default Columnlist;

Answer 1

您是否记得将返回组件包装在<ToolkitProvider />高阶组件中，如下所示？

return (
    <ToolkitProvider
        keyField="id"
        data={data}
        columns={columns}
        search
    >
        {
            (props) => (
                <div style={{ padding: "20px" }}>
                <h1 className="h2">Variables</h1>
                    <SearchBar {...props.searchProps} />

        ......

    </ToolkitProvider>
);