# Reset機能の実装

ユーザー管理画面で、検索やチェックボックス、ソートで絞り込まれた情報を諸々リセットし、初期状態に戻す実装をした

![Screen Shot 0002-04-09 at 13.36.16.png](/attachment/5e8ea653765c6d00483e7976)

↓リセットボタンの実装
```jsx:UserManagement.jsx
<button
    type="button"
    className="btn btn-outline-secondary btn-sm"
    
    //クリック時にresetButtonClickHandlerメソッドが呼び出される
    onClick={() => { this.resetButtonClickHandler() }}
  >
    <span
      className="icon-refresh mr-1"
    >
    </span>
    Reset
  </button>
</div>
```
↓↓↓

```jsx:UserManagement.jsx
  /**
   * Reset button
   */
   
   //onClickによって呼び出される
  resetButtonClickHandler() {
    const { adminUsersContainer } = this.props;
    
    //try-catch構文によって、予想しない時にエラーが表示されるようにする
    try {
    
    //adminUsersContainerのresetAllChangesメソッドが呼び出される
      adminUsersContainer.resetAllChanges();
      this.searchUserElement.value = '';
      this.state.isNotifyCommentShow = false;
    }
    catch (err) {
      toastError(err);
    }
  }

```
↓↓↓
```js:AdminUsersContainer.js
  async resetAllChanges() {
  
  // 全ての変更を初期状態に戻す。
    await this.setState({
    //idの昇順で
      sort: 'id', 
      sortOrder: 'asc',
      
    //検索ボックスは空に
      searchText: '',
      
    //チェックボックスのチェックをallにして全ての情報を表示されるようにする
      selectedStatusList: new Set(['all']),
    });
    this.retrieveUsersByPagingNum(1);
  }

```
おしまい

---

## Page Navigation

- Canonical URL: https://tips.weseek.co.jp/開発日記/UserManagement/Reset機能の実装
- Permalink: https://tips.weseek.co.jp/5e8ea5ef765c6d00483e7974
- Parent: [UserManagement](/65069da24603e7ff39a6b3d2.md)
- Children: 0 total
- Total descendants: 0
- Siblings: 0 total
- Last updated: 2020-04-09T04:50:05.317Z by deleted_at_1715747466121
- Full page listing (all children regardless of count): https://tips.weseek.co.jp/_api/v3/page-listing/children?id=5e8ea5ef765c6d00483e7974