P粉3223196012023-08-31 09:00:43
내가 한 방법은 다음과 같습니다: 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로 설정합니다. (항목)
(부울
반환)
이 작업을 수행하려면 각
에 있어야 합니다. 있는 경우 필터링하세요. 존재하지 않는 경우 추가하세요. 🎜 으아악 🎜이로 인해 일부 문제가 해결되기를 바랍니다. 🎜P粉0605283262023-08-31 00:36:19
각 그룹에 대해 특정 handlerOnChange 함수를 생성해야 합니다. 장르 확인란 그룹에 대해 유사한 기능을 만들었으며 동일한 방식으로 다른 그룹에도 만들 수 있습니다.
처리 기능입니다.
으아악아래와 같이 이 함수를 CustomCheckboxGroup에 handlerOnChange 속성으로 전달합니다.
으아악테스트를 위해 handlerOnChange 함수를 주석 처리하세요.
샌드박스에서 전체 작업 솔루션 보기 - 전체 코드