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

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

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

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


## チェックボックス を入れるには
![Screen Shot 0002-03-30 at 17.46.08.png](/attachment/5e843f3247e08f0048bfebd2)


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

# イベント処理の条件
- React のイベントは小文字ではなく camelCase で名付けらる
- JSX ではイベントハンドラとして文字列("")ではなく関数 { } を渡す。  
[イベント処理 - Reactより⤴️](https://ja.reactjs.org/docs/handling-events.html)

## checked
- 何がチェックされているのかをstatusListに渡していく
チェックされると、statusListの中身が

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


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

```

## 全体コード
```jsx: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>
```

[複数チェックボックスの条件分岐](https://tips.weseek.co.jp/%E7%94%A8%E8%AA%9E%E9%9B%86/Javascript/React/%E8%A4%87%E6%95%B0%E3%83%81%E3%82%A7%E3%83%83%E3%82%AF%E3%83%9C%E3%83%83%E3%82%AF%E3%82%B9%E3%81%AE%E5%AE%9F%E8%A3%85/%E3%83%81%E3%82%A7%E3%83%83%E3%82%AF%E3%83%9C%E3%83%83%E3%82%AF%E3%82%B9%E3%81%AE%E6%9D%A1%E4%BB%B6%E5%88%86%E5%B2%90)に続く


---

## Page Navigation

- Canonical URL: https://tips.weseek.co.jp/用語集/Javascript/React/複数チェックボックスの実装
- Permalink: https://tips.weseek.co.jp/5e843ea547e08f0048bfebce
- Parent: [React](/5e3930c8e848c600487d69ed.md)
- Children: 3 total
  - [チェックボックスの条件分岐](/5e8440ac47e08f0048bfebd5.md)
  - [チェックボックスの色をラベルと同じにする[bootstrap4]](/5e869e52139099004805818a.md)
  - [ラベルクリック時にもチェックがつくようにする](/5e85713dccf745004983aa56.md)
- Total descendants: 3
- Siblings: 0 total
- Last updated: 2020-04-01T07:24:26.101Z by deleted_at_1715747466121
- Full page listing (all children regardless of count): https://tips.weseek.co.jp/_api/v3/page-listing/children?id=5e843ea547e08f0048bfebce