next.jsでチェックボックスを全選択・全解除できるボタンを実装したい

Question

前提・実現したいこと

現在、apiで取得したデータの数だけ増えていく（データ情報＋チェックボックス付きの）がセットになったコンポーネントを作っています。別コンポーネントにあるボタンを押してそのチェックボックスのコンポーネントのチェックが全て選択、解除できるようにしたいと思っております。
文章で説明するのが難しいのでソースコードをご確認いただけたら幸いです。

該当のソースコード

不要な部分は見やすいように記述しておりません。追加の情報が必要でしたらお手数ですがおっしゃってください。

親コンポーネント
import FrontLayout from "../../components/Templates/frontLyout";
import React,{useState} from "react";
import FavoriteBuild from "../../components/form/front/favorite-build/favorite-build"
import UserFavoriteHeader from "../../components/header/user-favorite-header"
import useSWR from "swr"

export default function Favorite() {
    const testUrl = '...'
    const fetcher = url => fetch(url).then(r => r.json())
    let data = useSWR(testUrl, fetcher)
    let newdata = data.data

    return(
      <>
        <FrontLayout>
            <FavoriteBuild newdata={newdata}/>  
        </FrontLayout>
        ↓↓↓↓↓↓　こちらのコンポーネントにあるボタンを押すとchangeAll関数が呼び出されるとようにしたい
        <UserFavoriteHeader data={newdata} changeAll={changeAll}} />
     　</>
    )
}

子コンポーネント
import FavoritecheckBox from "./favorite-building-check"

export default function FavoriteBuildingBuy(props) {
    let newdata = props.newdata

    
    return(
        <> 
        {newdata == undefined ?<p>読込中...</p>
        :
        <>
        {newdata.map((value, idx) => (
            <div key={value.title}>
                <FavoritecheckBox value={value} title={value.title}>
                  ...
                </FavoritecheckBox>  
                
            </div>))}
        </>
        }       
        </>

    )
}

孫コンポーネント
import { useState } from "react"
export default function FavoritecheckBox(props){
    let title = props.title
    let value = props.value
    
    return(
        <>
        
    <div>
        <label>
        ↓↓↓↓↓↓↓↓↓↓対象のチェックボックス
        <input className="check-box-list" type="checkbox"/>
        <div>{title}</div>
        </label>
    </div>
    {props.children}

    )
}

試したこと

選択肢の数がわかっており同一ページ内の全選択の方法などは調べると出てくるのですが、別コンポーネントで押して対象のチェックボックスを全選択にする方法などが出てきませんでした。ここから全選択できる方法はないのでしょうか？
また、ない場合どういった方法で全選択全解除を実装することができるのでしょうか？お力を貸していただけると幸いです。よろしくお願いします。

Answer 1

現状のままでは、チェックボックスの値はReactから制御しない構造になっています。

無理やりこのままやるとすれば、「DOMでチェックボックスを探してチェック状態を変更する」ような実装となりますが、あまりおすすめはしません。

一般には、チェックの状態を管理するstateをReact内に持たせて、チェック・チェック解除・全チェック・全解除などの操作に合わせて、状態変数を変更していく、というような流れで実装を行います。

Comments

[donnjara]

stateは今回の場合ですと、親コンポーネントで管理するという形になるのでしょうか？

[maisumakun]

そうですね、リセットボタンを親につける以上は親にstateを入れる必要があります。

[donnjara]

ご連絡ありがとうございます。その方向で実装進めていきたいと思います！

[donnjara]

その形で実装ができましたらベストアンサーにさせて頂きます????‍♂️

[donnjara]

何度もすみません。親コンポーネントで下記のような形で管理しようとしたのですが、個別のinputを押した時に個別に変化させるにはどうすればよろしいのでしょうか？
上記にある孫コンポーネントのinputタグを押した時に呼ばれる関数でcheckを変えたいと思ったのですが、親コンポーネントで全て管理しているので全てにチェックがついてしまうのですが、こちらどういった解決方法があるのでしょうか？たびたびで申し訳ないのですが、ご教授いただけると幸いです。
const [check, checkFlg] = useState(false)
全選択・全解除を押した時
const changeAll = () =>{
if(check == true) {
checkFlg(false)
}else if(check == false){
checkFlg(true)
}
}

----->propsとして渡して...<input checked={check} />

[maisumakun]

> 親コンポーネントで全て管理しているので全てにチェックがついてしまうのですが

変数が1つしかなければ、全部同じチェック状態にならざるを得ません。配列あるいは連想配列で個々のチェック状態をバラバラに管理できるようにしましょう。

[donnjara]

配列でバラバラに管理するというのは理解できるのですが、今回の場合だと初めの
const [check, checkFlg] = useState({

})
の部分に
どのような記述をしたら良いのか全くイメージが湧かないのですが、教えていただけないでしょうか？孫にあるinputとどのように繋げるのか検討がつきません、、、

[maisumakun]

それより前に確認しておきたいのですが、孫コンポーネントで「let value = props.value」としているにも関わらず、このvalueがどこでも使われていません。

valueはどういう値が入っていて、何に使うべきものなのでしょうか？

[donnjara]

連絡が遅くなってしまって大変申し訳ないです。
孫コンポーネントに記載のあるprops.vaulueは関係のないapiのデータ関連のものです。valueなどの名前はややこしいのでこういった使用は無くします、、、

[donnjara]

const [checked, setChecked] = useState({});
const [isCheckAll, setIsCheckAll] = useState(false);
const changeChecked = e => {
setChecked({ ...checked, [e.target.value]: e.target.checked });
}
const handleSelectAll = e => {
};
上記のように個別のinputは関数をつけてチェックの付けはずしができるようになったのですが、一つのボタンで全選択、全解除する方の記述をどのようにすればよろしいのでしょうか、、