>  Q&A  >  본문

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

<p>여러 체크박스 그룹에서 여러 체크박스를 실행했습니다. 특정 확인란을 선택 취소(따라서 상태 변경)하는 방법을 알 수 없습니다. 어떤 이유로 <code>e.target.checked</code>에 액세스할 수 없습니다. </p> <pre class="brush:php;toolbar:false;"><체크박스 크기="작은" 이름={항목} 값={항목} 확인됨={checkboxvalues.includes(항목)} onChange={(e) => //></pre> <p>그리고 내 기능</p> <pre class="brush:php;toolbar:false;">const handlerOnChange = (e) => const check = e.target.checked; setChecked(!check); };</pre> <p><strong>이 샌드박스</strong>에서 구성요소의 실제 예제를 만들었습니다. </p>
P粉008829791P粉008829791438일 전452

모든 응답(2)나는 대답할 것이다

  • P粉322319601

    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()调用中的itemsselectedsetSelectedsectionLabel都存储在store[key]中,并传递给一个<CustomCheckboxGroup /> 구성 요소.

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


    더 자세한 설명(이유)

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

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

    으아악

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


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

    모든

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

    이 작업을 수행하려면 각

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

    회신하다
    0
  • P粉060528326

    P粉0605283262023-08-31 00:36:19

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

    처리 기능입니다.

    으아악

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

    으아악

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

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

    회신하다
    0
  • 취소회신하다