Reset機能の実装

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

↓リセットボタンの実装

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>

↓↓↓

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);
    }
  }

↓↓↓

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

おしまい