React를 사용하여 체크박스의 선택된 값 가져오기
P粉590929392
P粉590929392 2023-09-02 22:36:49
0
2
612
<p>체크박스의 선택된 값을 검색하여 배열에 저장하려고 합니다. 나는 다음을 시도했다: </p> <pre class="brush:php;toolbar:false;">arr.push(setNewItem(checked)) arr.push(e.target.value.checked) arr.push(items.checked)</pre> <p>그러나 이러한 값은 잘못된 유형이나 정의되지 않은 값을 반환합니다. </p> <pre class="brush:php;toolbar:false;">const [checkedItems, setCheckedItems] = useState([]); const handlerChange = (e) => if (e.target.checked) { var arr = [...checkedItems]; //arr.push(setNewItem(e.target.value.checked)); setCheckedItems(arr); console.log(arr); } 또 다른 { checkItems = ""; } setIsChecked((현재) => !current); };</pre> <pre class="brush:php;toolbar:false;">return ( <div className="앱"> <스타일양식> <스타일 입력 유형="텍스트" 자리 표시자="추가" 값={newItem} onChange={(e) => setNewItem(e.target.value)} onKeyPress={handleOnKeyPress} /> <ButtonAddStyle onClick={() => addItem()}>추가</ButtonAddStyle> <StyleUl> {items.map((항목) => { 반품 ( <StyleLi key={item.id}> <StyleCheckBox 유형="체크박스" 값={isChecked} onChange={handleChange} /> {항목.값} {""} <ButtonDelStyle onClick={() => deleteItem(item.id)}> 엑스 </ButtonDelStyle> </스타일리> ); })} </StyleUl> </스타일양식> </div> );</pre>
P粉590929392
P粉590929392

모든 응답(2)
P粉575055974

이렇게 하면 문제가 해결될 수 있습니다.

으아악
P粉846294303

으아악

는 다음을 제거하는 올바른 방법입니다:

으아악

이 방법으로는 상태를 업데이트할 수 없습니다. 입력 선택을 취소하려고 하면 오류가 나타납니다:

이제 무엇을 하고 싶은지 살펴보겠습니다. 입력을 선택할 때마다 저장됩니다 e.target.checked,所以checkedItems 다음과 같이 표시됩니다:

으아악

이게 왜 필요한가요? 더 나은 접근 방식은 선택한 항목의 ID를 저장하는 것입니다.

으아악

그런 다음 jsx에서:

으아악

이제 이것 좀 보세요:

으아악

정말로 필요하지 않은 items进行映射,创建多个复选框,但它们都共享相同的值。而复选框的值属性并不是你想象的那样,请在这里了解更多。所以你可以使用value={item.id}为每个输入设置一个唯一的值,并且可以摆脱isChecked의 useState 후크를 전달하고 있습니다.

최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿