>source

나는 내 프로젝트의 체크 박스를 만들고 슬프게도 하루를 보냈지 만 여전히 문제를 해결할 수 없었다. 모든 자식 체크 박스와 자식 체크 박스를 제어하는 ​​어머니 체크 박스가 있습니다.

내가 만들고 싶었던 것은 자식의 모든 체크 박스가 체크되면 부모 노드의 allChecked 체크 박스를 체크해야한다는 것입니다. 확인란 중 하나가 선택 취소되면 부모 노드의 allChecked 확인란을 선택 취소해야합니다.

처음에는 소품 문제일지도 모른다고 생각했습니다. 나는 'cards'에서 'card'로 'allChecked'값을주고, 'prop로 값만 주나요? (거짓의 참처럼)'. 그러나 몇 가지 실험 후 동일한 변수를 공유 할 수 있습니다.

자녀의 확인란이 완전히 선택되었을 때 내 코드가 부모 노드의 확인란을 변경하지 않는 이유를 이해할 수 없습니다. 내가 아는 한 속성이 변경되면 노드를 다시 렌더링하지만 변경 후 어머니의 확인란은 변경되지 않습니다.

Cards.js

const Cards = ({ cards }) => {
    const numberOfCards = cards.length;
    const [allChecked, setAllChecked] = useState(false);
    const [checkedList, setCheckedList] = useState(new Set());
    const handleAllChecked = () => {
        setAllChecked(!allChecked);
    }
    return (
        <>
            <>
                <>
                    <input type="checkbox" value={allChecked} onChange={handleAllChecked} />
                </>
                <>
                    { cards.map(el => <Card
                                    id={el.id}
                                    key={el.id}
                                    checkedList={checkedList}
                                    setCheckedList={setCheckedList}
                                    allChecked={allChecked}
                                    setAllChecked={setAllChecked}
                                    numberOfCards={numberOfCards}
                                />) }
                </>
            </>
        </>
    )
}

Card.js

const Card = ({ id, checkedList, setCheckedList, allChecked, setAllChecked, numberOfCards }) => {
    const [checked, setChecked] = useState(false);
    const controlCheckedList = () => {
        if (!checked) {
            checkedList.add(id);
            setCheckedList(checkedList);
        } else {
            checkedList.delete(id);
            setCheckedList(checkedList);
        }
    }
    const handleChecked = () => {
        setChecked(!checked);
        controlCheckedList();
    }
    useEffect(() => {
        if (allChecked) {
            setChecked(true);
            checkedList.add(id);
            setCheckedList(checkedList);
        }
        else if (!allChecked&&checkedList.size===numberOfCards) {
            setChecked(false);
            setCheckedList(new Set());
        };
    }, [allChecked]);
    useEffect(()=>{
        if (checked) {
            if (checkedList.size===numberOfCards){ // here is the part where I think mother's allChecked has to be changed
                setAllChecked(true);
            }
        } else {
            if (checkedList.size<numberOfCards){ // here is the part where I think mother's allChecked has to be changed
                setAllChecked(false);
            }
        }
    }, [checked]);
    return (
        <>
            <input type="checkbox" checked={checked} onChange={handleChecked} />
        </>
    )
}

ContextAPI 등으로 쉽게 해결할 수있는 방법이 있다고 느낄 수 있지만 실제로는 useState 및 useEffect로 해결하고 싶습니다 (다른 많은 예제를 찾을 수 있음). 내가 알고 싶은 것은 왜 모든 체크 박스를 체크했을 때, 마더 체크 박스의 값이 변경 되어도 마더 체크 박스에 눈에 띄게 변경되지 않는 이유입니다. 미리 감사드립니다.

  • 답변 # 1

    당신은 사용해야합니다 checked 아니 valueCards.js.

    <input type="checkbox" checked={allChecked} onChange={handleAllChecked} />
    
    

관련 자료

  • 이전 localstorage에 저장된 템플릿을 어떻게 표시 할 수 있습니까? (각도 소재)
  • 다음 python 3.x - datetimestrptime ()을 사용하여 오류를 반환하는 Datetime 함수