React-bootstrap-table2: How to add clear search button in this new version?

[dcuti8]

I use the old version before, and it has clearSearch and clearSearchBtn. Does the new version has the similar props to add the clear search button?

waitting for your reply. thank you very much。

[AllenFang]

@dcuti8 sorry for lately reply, I got serious disease from last week.

So far, we dont have search clear function, but it's easy to implement:

import BootstrapTable from 'react-bootstrap-table-next';
import ToolkitProvider, { Search } from 'react-bootstrap-table2-toolkit';

const { SearchBar } = Search;

<ToolkitProvider
  keyField="id"
  data={ products }
  columns={ columns }
  search
>
  {
    props => (
      <div>
        <SearchBar { ...props.searchProps } />
        <button onClick={ () => props.searchProps.onSearch('') }>Clear</button>
        <hr />
        <BootstrapTable
          { ...props.baseProps }
        />
      </div>
    )
  }
</ToolkitProvider>

I think above case should be work. Please tag me if it's not helpful to you, thanks

[dcuti8]

Thank you for your reply~. The solution is works. But it can only clear the result, the text in the search box dosen't be cleared. So, I add one more document.getElementById('search_txt').value = ""; code to clear the search box content;

clear(props){
    props.searchProps.onSearch('');
    document.getElementById('search_txt').value = "";
  }

<SearchBar { ...props.searchProps } placeholder="請輸入關鍵字..." id="search_txt"/>
<Button onClick={ () => this.clear(props) } `className="btn-warning">清除</Button>

Thank you very much! attention to the body!

[AllenFang]

Let me reopen this issue, I think I will consider to implement clear search in the future :)

thanks @dcuti8

[AllenFang]

https://react-bootstrap-table.github.io/react-bootstrap-table2/blog/2019/01/20/version-bump.html

Fixed on [email protected] and [email protected]

this is online demo.

docs

[vanegg]

Is there a custom clean? @AllenFang