WESEEK Tips wiki
WESEEK Tips wiki
helpdelete

複数チェックボックスの実装

Reactで複数チェックボックスの実装

ユーザー管理ページ

Growiのユーザー管理ページで、ステータスによって表示する情報を変えるためにチェックボックスの実装を行った。

チェックボックスには、All, ApprovalPending, Active, Suspended, Invitedの５つあるが、このページではAllのみを解説。 Screen Shot 0002-03-30 at 17.09.09.png

チェックボックス を入れるには

Screen Shot 0002-03-30 at 17.46.08.png

  • チェックボックスを表示させるにはinputタグでtype属性に"checkbox"を入れてあげる
    • checkedとonClickは後ほど解説するので今はスルーしてよし
UserManagement.jsx
<input
  type="checkbox" //ここ
  checked={adminUsersContainer.isSelected('all')}
  onClick={() => { this.handleClick('all') }}
/>
  • チェックボックスの横にラベル(All)を入れる
    • spanタグ(インライン要素)をlabelタグで挟む
    • classNameにはラベルの位置や見た目を指定してあげる
UserManagement.jsx
<label>
  <span className="label label-primary d-inline-block vt mt-1">All</span>
</label>

イベント処理の条件

checked

  • 何がチェックされているのかをstatusListに渡していく チェックされると、statusListの中身が
UserManagement.jsx
checked={adminUsersContainer.isSelected('all')}
AdminUsersContainer.js
//AdminUsersContainerのstateの中
this.state = {
      selectedStatusList: new Set(['all']),　
      //複数のチェックボックスなので配列
      //初期状態は'all'にチェックされているように指定
    };


//AdminUsersContainersクラスの中
isSelected(statusType) {
    return this.state.selectedStatusList.has(statusType);
  }

全体コード

UserManagement.jsx

<div className="mx-5 form-inline">

    //Allのチェックボックス
    <div className="checkbox checkbox-primary pl-0">
        <input
          type="checkbox"
          id="c1"
          checked={adminUsersContainer.isSelected('all')}
          onClick={() => { this.handleClick('all') }}
        />
        <label htmlFor="c1">
            <span className="label label-primary d-inline-block vt mt-1">All</span>
        </label>
    </div>
    
    //Approval Pendingのチェックボックス
    <div className="checkbox checkbox-info">
        <input
          type="checkbox"
          id="c2"
          checked={adminUsersContainer.isSelected('registered')}
          onClick={() => { this.handleClick('registered') }}
        />
        <label htmlFor="c2">
        <span className="label label-info d-inline-block vt mt-1">Approval Pending</span>
        </label>
    </div>
   //以下省略
</div>

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