Reactで複数のチェックボックスのチェックされている状態とされていない状態をチェックボックス毎に管理したいです。

Question

前提・実現したいこと

Reactで複数のチェックボックスのチェックされている状態とされていない状態を管理したいです。
現状では、ischeckedという1つのstateで管理されており、どのチェックボックスをクリックしたかに関わらず、状態が変更してしまう状態です。
それをチェックボックス毎分離して管理したいと思っています。

この要件の次のステップとして、チェックをを入れるとそのチェックしたチェックボックスに応じてAPIを取得して、別のコンポーネントに渡すという要件があるため、親コンポーネントでstateを管理したいです。

該当のソースコード

• App.jsx

import React from "react";
import { CheckBoxes } from "./components/index";

export default class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      error: null,
      isLoaded: false,
      prefs: [],
      isChecked: false,
    };

    this.changeIsChecked = this.changeIsChecked.bind(this);
  }

  changeIsChecked = () => {
    this.setState({
      isChecked: !this.state.isChecked
    })
    console.log(this.state.isChecked)
  }

  componentDidMount() {
    fetch("https://opendata.resas-portal.go.jp/api/v1/prefectures", {
      headers: {
        "X-API-KEY": "APIキーが入ります",
      },
    })
      .then(res => res.json())
      .then(
        (data) => {
          this.setState({
            isLoaded: true,
            prefs: data.result
          });
        },
        (error) => {
          this.setState({
            isLoaded: true,
            error
          });
        }
      )
  }

  render() {
    const { error, isLoaded } = this.state;
    if (error) {
      return <div>Error: {error.message}</div>;
    } else if (!isLoaded) {
      return <div>Loading...</div>;
    } else {
      return (
        <CheckBoxes prefs={this.state.prefs} isChecked={this.state.isChecked} changeIsChecked={this.changeIsChecked} />
      );
    }
  }
}

• CheckBoxes.jsx

import React from "react";
import { CheckBox } from "./index";

const CheckBoxes = (props) => {
  return (
    <>
      {props.prefs.map((pref) => {
        return (
          <CheckBox
            name={pref.prefName}
            key={pref.prefCode}
            isChecked={props.isChecked}
            changeIsChecked={props.changeIsChecked}
          />
        );
      })}
    </>
  );
};

export default CheckBoxes;

• CheckBox.jsx

import React from "react";

const CheckBox = (props) => {
  return (
    <>
      <label htmlFor='check'>{props.name}：</label>
      <input type='checkbox' id='check' isChecked={props.isChecked} onClick={() => props.changeIsChecked()} />
    </>
  );
};

export default CheckBox;

Answer 1

isChecked という一つの boolean (true/false) では一つのチェックボックスの状態しか管理できません。複数のチェックボックスの状態を管理するには、何らかの方法で各チェックボックスの状態を管理する必要があります。方法としては、配列的なもの（配列・連想配列・集合など）を使う方法と、各データそのものに isChecked 属性を勝手に追加してしまう方法があります。ここでは集合 (Set) を使ってみます。
JavaScript Setオブジェクト - Qiita
JavaScript | Setオブジェクト - Qiita

まず、isChecked の代わりに checkedCodes という集合を用意して、ここにチェックされた prefCode を格納することにします。

 export default class App extends React.Component {
   constructor(props) {
     super(props);
     this.state = {
       error: null,
       isLoaded: false,
       prefs: [],
-      isChecked: false,
+      checkedCodes: new Set(),
     };
 
     this.changeIsChecked = this.changeIsChecked.bind(this);
   }

changeIsChecked には、どのチェックボックスが押されたかを区別するための引数 prefCode が必要です。
new Set(this.state.checkedCodes) は現在の checkedCodes をコピーしています。React では、集合などのオブジェクトを変更する場合には、必ずコピーしてから変更を加えて setState する必要があることに注意しましょう。
次の if 文は、checkedCodes に prefCode が含まれていればチェックされているということなので、prefCode を checkedCodes から取り除き、含まれてなければ追加します。
最後の console.log では、デバッグのために現在選択されている prefName をすべて表示しています。

-  changeIsChecked = () => {
-    this.setState({
-      isChecked: !this.state.isChecked
-    })
-    console.log(this.state.isChecked)
+  changeIsChecked = (prefCode) => {
+    const checkedCodes = new Set(this.state.checkedCodes);
+    if (checkedCodes.has(prefCode)) {
+      checkedCodes.delete(prefCode);
+    } else {
+      checkedCodes.add(prefCode);
+    }
+    this.setState({ checkedCodes });
+    console.log(this.state.prefs.filter(pref => checkedCodes.has(pref.prefCode)).map(pref => pref.prefName))
   }

CheckBoxes にも isChecked の代わりに checkedCodes を渡します。

   render() {
     const { error, isLoaded } = this.state;
     if (error) {
       return <div>Error: {error.message}</div>;
     } else if (!isLoaded) {
       return <div>Loading...</div>;
     } else {
       return (
-        <CheckBoxes prefs={this.state.prefs} isChecked={this.state.isChecked} changeIsChecked={this.changeIsChecked} />
+        <CheckBoxes prefs={this.state.prefs} checkedCodes={this.state.checkedCodes} changeIsChecked={this.changeIsChecked} />
       );
     }
   }

CheckBoxes では、各 CheckBoxes に渡す値のうち isChecked と changeIsChecked を変更します。
isChecked は checkedCodes に prefCode が含まれるかどうかでチェックされているかどうかを判定します。
また、changeIsChecked は prefCode を引数として呼び出すように変更します。

 const CheckBoxes = (props) => {
   return (
     <>
       {props.prefs.map((pref) => {
         return (
           <CheckBox
             name={pref.prefName}
             key={pref.prefCode}
-            isChecked={props.isChecked}
-            changeIsChecked={props.changeIsChecked}
+            isChecked={props.checkedCodes.has(pref.prefCode)}
+            changeIsChecked={() => props.changeIsChecked(pref.prefCode)}
           />
         );
       })}
     </>
   );
 };

CheckBox は変更の必要はないはずですが、input タグの属性としては checked や onChange の方が正しそうなので修正しました。また、br タグは個人的に改行した方が見やすかったので。

 const CheckBox = (props) => {
   return (
     <>
       <label htmlFor='check'>{props.name}：</label>
-      <input type='checkbox' id='check' isChecked={props.isChecked} onClick={() => props.changeIsChecked()} />
+      <input type='checkbox' id='check' checked={props.isChecked} onChange={() => props.changeIsChecked()} />
+      <br />
     </>
   );
 };

Comments

[madaratyou]

的確な回答ありがとうございます。

<label>をクリックしたときにもチェックのつけ外しをできるようにしたかったので、
onClick={() => props.changeIsChecked()}
を<label>に追加したのですが、<label>をクリックするとなぜかクリックしたprefCodeと同時に1が同時に取得されているみたいでどの<label>をクリックしてもprefCode＝1のチェックボックスにチェックが付いたり、外れたりしてしまいます。

これの解決策を教えていただけると幸いです。

[hoshi-takanori]

label にはもともと htmlFor 属性がついてますが、これは html 的には for 属性になります。
https://qiita.com/nogizaka46/items/612ba6522d546f5f954f#htmlfor

で、label に for がついていると、その id の input タグが押されたことになるのですが、html 的には id は一つのページの中でユニークである必要があります。ところが、CheckBox.jsx では htmFor にすべて同じ check が指定されているために、最初に見つかった id='check' の input 要素が押されたことになってるんだと思います。
https://teratail.com/questions/55463

解決方法としては、CheckBox の props に prefCode を渡して htmlFor および input の id に prefCode をつけるか (その場合は label の onClick は不要なはず)、いっそのこと htmlFor を削除して label の onClick だけで処理するか、でしょうか。

[hoshi-takanori]

もう一つ方法がありました。label 要素は input 要素を囲む形で使うことができ、この場合は htmlFor も onClick も input の id も不要になるので、これが一番簡単かもしれません。(古いブラウザは対応してなかったような気もしますが、もう 2020 年も終わるし気にしなくていいはず…。)
あと、CheckBox.js では changeIsChecked に引数を渡す必要がないので、onChange も簡単に書けるはず。

<label>{props.name}：
<input type='checkbox' checked={props.isChecked} onChange={props.changeIsChecked} />
</label>

参考
https://teratail.com/questions/142872

[madaratyou]

ありがとうございます。2つ目の方法でできました。！！

本当にお世話になります。！！