인프런 커뮤니티 질문&답변

동배님의 프로필 이미지

작성한 질문수

따라하며 배우는 노드, 리액트 시리즈 - 쇼핑몰 사이트 만들기[전체 리뉴얼]

섹션2 체크박스 필터 만들기#2 질문

해결된 질문

작성

·

278

0

저는 강의랑 다르게  checkbox에 evntlistener을 달지않고 row에 이벤트 위임으로 달았습니다.

각각의 checkbox에 id로 Continent.value를 넣었습니다.

문제는 7번째 줄 else 부분에서 제 의도랑 다르게 동작하내요.

뭐가 잘못된걸까요??ㅠ

function CheckBox() {
  const [checkedsetChecked] = useState([]);
  const funcCheck = (e=> {
    if (e.target.checked) {
      setChecked(checked.concat(e.target.id));
    } else {
      setChecked(checked.splice(checked.indexOf(e.target.id1)));
    }
  };
  console.log(checked);
  const renderCheckbox = () =>
    Continents.map((vi=> (
      <Col span={8} key={i}>
        <Checkbox id={v.value} key={i}>
          {v.value}
        </Checkbox>
      </Col>
    ));
  return (
    <div>
      <Collapse>
        <Panel header="Continent">
          <Row onClick={funcCheck}>{renderCheckbox()}</Row>
        </Panel>
      </Collapse>
    </div>
  );
}

답변 2

0

동배님의 프로필 이미지
동배
질문자

하... 진짜... 바보같이 splice 반환값으로 setcheck하고 있었내요...ㅠ

0

John Ahn님의 프로필 이미지
John Ahn
지식공유자

Checkbox 하나하나의 고유 id를 가져야 컨트롤이 가능한데   Row는 모든 Checkbox를 포함하고 있는 애이기에  Row의 고유 id 는 갖을순있지만   checkbox의 고유의 id를 가질순 없습니다 ^^ 

동배님의 프로필 이미지

작성한 질문수

질문하기