React 후크를 사용하여 확인란 그룹의 여러 확인란을 선택 취소합니다.

Question

여러 체크박스 그룹에서 여러 체크박스를 실행했습니다. 특정 확인란을 선택 취소(따라서 상태 변경)하는 방법을 알 수 없습니다. 어떤 이유로 e.target.checked에 액세스할 수 없습니다.

<체크박스
      크기="작은"
      이름={항목}
      값={항목}
      확인됨={checkboxvalues.includes(항목)}
      onChange={(e) =>
  //>

그리고 내 기능

const handlerOnChange = (e) =>
   const check = e.target.checked;
   setChecked(!check);
};

이 샌드박스에서 구성요소의 실제 예제를 만들었습니다.

Answer 1

내가 한 방법은 다음과 같습니다: https://codesandbox.io/s/elastic-pateu-flwqvp?file=/comComponents/Selectors.js

선택 논리를 useSelection()自定义钩子，这意味着当前选择可以在store[key].selected中找到，其中key可以是selectors모든 키로 추상화했습니다.

모든 useSelection()调用中的items、selected、setSelected和sectionLabel都存储在store[key]中，并传递给一个<CustomCheckboxGroup /> 구성 요소.

해당 부분이 컴포넌트 내의 handleCheck函数，它根据先前选择的值设置新的选择：如果当前item包含在先前的selected 값 내에 있으면 제거하세요. 그렇지 않으면 추가하십시오.

---

더 자세한 설명(이유)

코드를 주의 깊게 살펴보면 React의 체크박스 구성 요소가 어떻게 작동하는지 혼란스러워 하시는 것 같습니다.

input的checked属性由一个boolean상태 제어. 일반적인 예:

으아악

모든 렌더링에서 <input />的checked值根据checked状态的当前值设置。当输入的checked发生变化（用户交互时），状态不会自动更新。但是onChange 이벤트가 발생하고 이를 사용하여 상태를 이전 상태 값의 음수 값으로 업데이트합니다.

---

<CheckboxList /> 구성요소를 다룰 때 우리는 <CheckboxList />组件时，我们不能使用单个布尔值来控制所有复选框，我们需要为正在渲染的每个复选框设置一个布尔值。因此，我们创建一个selected数组，并将每个<input />的checked值设置为selected.includes(item)的值（返回一个boolean 단일 부울 값을 사용하여

모든

체크박스를 제어할 수 onChange事件中更新selected数组的值。我们检查item是否包含在先前版本的selected 있습니다. 확인란부울 값을 설정합니다. 따라서 selected 배열을 생성하고 각 <input />의 checked 값을 selected.includes로 설정합니다. (항목)(부울 반환)

이 작업을 수행하려면 각

에 있어야 합니다. 있는 경우 필터링하세요. 존재하지 않는 경우 추가하세요. 🎜 으아악 🎜이로 인해 일부 문제가 해결되기를 바랍니다. 🎜

Answer 2

각 그룹에 대해 특정 handlerOnChange 함수를 생성해야 합니다. 장르 확인란 그룹에 대해 유사한 기능을 만들었으며 동일한 방식으로 다른 그룹에도 만들 수 있습니다.

처리 기능입니다.

으아악

아래와 같이 이 함수를 CustomCheckboxGroup에 handlerOnChange 속성으로 전달합니다.

으아악

테스트를 위해 handlerOnChange 함수를 주석 처리하세요.

샌드박스에서 전체 작업 솔루션 보기 - 전체 코드