react-bootstrap-table2 では以下の公式デモが公開されていますが、1つのボタンで検索バーとフィルターをクリアするものは公開されていません。
ちょうど上記のようなボタンが必要だったので、上記デモを参考に作ってみました。
こちら が CodeSandbox で公開しているデモです。
Requirements
- React 16.8.6
- react-bootstrap-table-next 3.1.8
- react-bootstrap-table2-filter 1.1.11
- react-bootstrap-table2-toolkit 2.0.1
公式デモ・ソースの確認
1. カラムのフィルターをクリアするデモ
ボタンがクリックすされた時に、各フィルターに空文字を渡してクリアしてます。
const handleClick = () => {
nameFilter('');
priceFilter('');
stockDateFilter();
};
export default () => (
<div>
<button onClick={ handleClick }> Clear all filters </button>
<BootstrapTable
keyField="id"
data={ products }
columns={ columns }
filter={ filterFactory() }
/>
</div>
);
handleClick 内で検索バーをクリアする処理を入れてあげればできそうです。
2. 検索バーをクリアするデモ
どうやって検索バーがクリアされてるのかさっぱり分かりません。
import ToolkitProvider, { Search } from 'react-bootstrap-table2-toolkit';
const { SearchBar, ClearSearchButton } = Search;
<ToolkitProvider
keyField="id"
data={ products }
columns={ columns }
search
>
{
props => (
<div>
<SearchBar { ...props.searchProps } />
<ClearSearchButton { ...props.searchProps } />
</div>
)
}
</ToolkitProvider>
GitHub のソースをみてみます。
3. 検索バーのソース
以下をもとにソースの場所を探してみました。
import ToolkitProvider, { Search } from 'react-bootstrap-table2-toolkit';
ソースを眺めてみると、キーボード入力がされた際に実行される処理の中にそれっぽいものがありました。
onKeyup = () => {
const { delay, onSearch } = this.props;
const debounceCallback = handleDebounce(() => {
onSearch(this.input.value);
}, delay);
debounceCallback();
}
キーボード入力された値（this.input.value）を onSearch にいれています。
ここに空文字をいれれば検索バーがクリアできそうです。
手順
1. ClearButton に searchProps と clearAllFilter を渡す
- カラムのフィルターをクリアする関数
clearAllFilter() {
nameFilter("");
priceFilter("");
originFilter("");
stockFilter("");
}
<ClearButton
{...props.searchProps}
clearAllFilter={this.clearAllFilter}
/>
2. ClearButton が押された時に検索バー（onSearch("")）とフィルターをクリアする処理（clearAllFilter()）を実行させる
const ClearButton = props => {
const handleClick = () => {
props.onSearch("");
props.clearAllFilter();
};
return (
<Button
onClick={handleClick}
>
Clear
</Button>
);
};
おわりに
react-bootstrap-table は廃止予定なので積極的に react-bootstrap-table2 を使いましょう。