LoginSignup
1

More than 3 years have passed since last update.

【react-bootstrap-table2】検索バーとカラムのフィルターを1つのボタンでクリアする

Last updated at Posted at 2019-08-27

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. ClearButtonsearchPropsclearAllFilter を渡す

  • カラムのフィルターをクリアする関数

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 を使いましょう。

Reference

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
1