checkbox state값 수정하는법

[형산]

즐거운 크리스마스이지만 잠시 질문으로 실례하겠습니다.

todolist를 리액트로 만들고있는데, 각 list에 삭제버튼을 달아놓았습니다.

그래서 삭제를 누르면

   var copyState = [...movies];
    var dataFilter = copyState.filter((item) => {
      return item.id !== id);
    });
    setMovies(dataFilter);

대략 이런식으로 filter를 써서 state를 업데이트해서, 구현했었는데요.

 

문제는 input으로 checkbox를 만들어서

여러개선택을 한 후 따로만들어놓은 삭제버튼을 누르면,  check된것이 다 삭제가 되어야하는데,

몇시간째 답이 안나오네요 ㅠㅠ

 

각 리스트들은 하나의 컴포넌트로 이루어져있고,

var checkbox = document.querySelector("input[type='checkbox']:<strong>checked</strong>"  );
  if (checkbox) {
    checkbox.parentNode.remove();

}

이런식으로 선택된것들을 dom에서 가져와 태그를 없애는 식으로 구현하긴했는데.

문제는 새로고침이되어도 없어져야해서, state배열값에도 업뎃이 되어야하고 localStorage에도 업데이트가 되어야하는데.

filter를 쓰면, 여러개를 선택해도 state와 localStorage값에 한개씩만 사라져서 문제입니다..

글로만 설명해서 전달이 잘안될꺼같지만 지푸라기심정으로라도 질문남겨요 ㅠㅠ

혹시 대략적으로라도 어떻게 하면 될런지요 ... .....

[형산]

https://github.com/hyeongsan/notenote

zip으로 한번 보시길 부탁드려요 (코드가 좀지저분하긴한데..)

바쁘시겠지만 한번만 보고가주시길 부탁드려요 ...............ㅠㅠㅠ쥬륵

YearAndTitle.js라는 컴포넌트에서

  var checkbox = document.querySelector(
    "input[type='checkbox']:nth-of-type(1):checked"
  );
  if (checkbox) {
    checkbox.parentNode.remove();
    var copyState = [...movies];
    var dataFilter = copyState.filter((item) => {
      return item.id !== parseInt(checkbox.dataset["code"]);
    });
    setMovies(dataFilter);
    localStorage.setItem("allEntries", JSON.stringify(dataFilter));
  }

이 부분이 좀 문제되는 부분인데 리스트들을 다중선택했을떄 한개씩만 지워집니다..

[codingapple]

querySelector 는 맨 위의 하나만 찾아주는 셀렉터입니다

많은 요소를 선택하고 싶으면 querySelectorAll() 을 써봅시다 그럼 [] 안에 결과를 다 담아줍니다 

[글쓴이]

글