React를 사용하여 체크박스의 선택된 값 가져오기
P粉590929392
2023-09-02 22:36:49
<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>
이렇게 하면 문제가 해결될 수 있습니다.
으아악으아악
는 다음을 제거하는 올바른 방법입니다:
으아악이 방법으로는 상태를 업데이트할 수 없습니다. 입력 선택을 취소하려고 하면 오류가 나타납니다:
이제 무엇을 하고 싶은지 살펴보겠습니다. 입력을 선택할 때마다 저장됩니다
으아악e.target.checked
,所以checkedItems
다음과 같이 표시됩니다:이게 왜 필요한가요? 더 나은 접근 방식은 선택한 항목의 ID를 저장하는 것입니다.
으아악그런 다음 jsx에서:
으아악이제 이것 좀 보세요:
으아악정말로 필요하지 않은
items
进行映射,创建多个复选框,但它们都共享相同的值。而复选框的值属性并不是你想象的那样,请在这里了解更多。所以你可以使用value={item.id}
为每个输入设置一个唯一的值,并且可以摆脱isChecked
의 useState 후크를 전달하고 있습니다.