複数チェックボックスの条件分岐

何をしたいのか

Allにチェックが入っている状態でAll以外にチェックをつけると、Allのチェックが解除され、
All以外にチェックが入っている時にAllにチェックをつけるとAll以外のチェックが解除されるようにしたい。

onClick

何をクリックしたのかという情報を渡すために、onClickの関数に任意の値を渡す

• 何をクリックしたのかを渡す
• クリックした時なのでチェックを外した時にも実行される。

::: drawio 7VnLcpswFP0aLZvhJRBLiEm6aDuZyaLtUjEq0MGWR8ixna+vMBIYCSckxnEy02wiXb3PvedcCQP3erG9ZXiVf6cpKYFjpVvgzoAj/gJf/Kstu8YSoKAxZKxIG5PdGe6LJyKNlrSui5RUvY6c0pIXq75xTpdLMuc9G2aMbvrd/tCyv+oKZ8Qw3M9xaVp/FinPGyuCVmf/SoosVyvblmxZYNVZGqocp3RzYHIT4F4zSnlTWmyvSVmDp3Bpxt0caW03xsiSjxngNQMecbmWZ5P74jt1WJKKs8sqZTynGV3iMumsMaPrZUrqGS1R6/p8o3QljLYw/iWc76Qj8ZpTYcr5opSt5q7lQSq6ZnO5D7kzjllGZC+3MdU7PBgmT3pL6IJwthMdGCkxLx773sMyCLK2X4eTKEiojuAcfjrcpgNJDr2jhVjVsRSrfRnSktOuIquaonGcHNVBHTGGdwfdVnWHavw6tm1pnmtm7PzYnnGUax3Ts0kIkA1iBBIfoAiECUjc2hLCfcEB6FpaIl8WkKeaYmWJjQhhOV08rMW5401ecHK/wnufbYRojvTzI2GcbJ9161Zzh5JcWd10+mUrUcoPtCu0jgfCaLZ8IpWZXFKGo9h334ct+jqOq+WDkfuail128D8UNMg9531CQV9HC4WTXesano1E+4cQPy/QcgYaUD97QP3ai9sp8gcNYH5QAw5xEt4/Ny6LbCnKc3FuwoShPm8hLqGRbFgUadrQgVTFE37YT1UTQkaCmBfGAM7quQQDqoYME0EKPa8PqQsNSN0BRJ0JAHU/koho8vCiqtjWMK6nqgjqh3hbnzqhqHDW1jmaUJ7vf3pCscxYkLezmbqUJRXHnMgLWSjaIUAQRNrtzRlUqV6QnF+poH6LdgaUaohXurvfxCtTqS7BK4Ee2/2qx19BVf0tp9tXZttebSdrb+SjPHTvXYnOlOlRnwv+uTK9xjn9I8Dr+p/OUTOuhhmJDp5RPojFa0tZwqD/wrLqsuOXdc58YKKU1SV14WjmRCC+AfFsP3kEIvXF5XLkdkeRG56J3Ob97KLk/mJdWTVYB/y+8r0XKL6v3RFWiOPXd6ITeN9+ODw/73W/nys3O1DTF+RMyuM24l+TazUehxdnoR1ekIWKdAcQ/iaVgclnew20H0TbB5ZnYOqd6TUw8L66hLC9UYVcU4WcE0VoNHADGSEJQejvP1qKdBwM3YjFHMWqImOpasTQACTHE6ZjPirDgTCCU+RHNIBGAGJYC1nigTgCyL8sGvoTD5rCNRE6otr9BtVkiu6XPDf5Bw== :::

• 選択しているものをクリックした場合

  • そのstateをstatusListから外す。

• そのstateが選択されておらず、allクリックした場合

  • 初期状態に戻る

• そのstateが選択されておらず、 all以外をクリックした場合

  • statusListにそのstateが追加される

UserManagement.jsx
<input
　// ((省略))
  // allをクリックした場合にhandleClickメソッドが呼び出され、そこにallを渡す。
  onClick={() => { this.handleClick('all') }}  
/>

条件分岐のメソッドとして、onClickにhandleClickメソッドを指定。
クリックすると、handleClickメソッドにstatus(ここではall)が渡される

AdminUsersContainer.js
handleClick(statusType) {
    const all = 'all';
    if (this.isSelected(statusType)) {
      this.deleteStatusFromList(statusType);
    }
    else {
      if (statusType === all) {
        this.clearStatusList();
      }
      else {
        this.deleteStatusFromList(all);
      }
      this.addStatusToList(statusType);
    }
  }

UserManagement.jsx
// 選択されているものを全部消して、allを追加

async clearStatusList() {
    const { selectedStatusList } = this.state;
    selectedStatusList.clear();　//clear ▶︎ 全部のstatusを消して空にする
    await this.setState({ selectedStatusList });　//空にした後にallを入れる
  }

// stateをstatusListに追加

  async addStatusToList(statusType) {
    const { selectedStatusList } = this.state;
    selectedStatusList.add(statusType);
    await this.setState({ selectedStatusList });
    this.retrieveUsersByPagingNum(1);
  }
  
//stateをstatusListから削除

  async deleteStatusFromList(statusType) {
    const { selectedStatusList } = this.state;
    selectedStatusList.delete(statusType);
    await this.setState({ selectedStatusList });
    this.retrieveUsersByPagingNum(1);
  }

おしまい