확인란을 클릭하면 React에서 이전 선택이 취소되는 이유는 무엇입니까?
P粉729198207
2023-08-13 10:57:24
<p>체크박스가 여러 개 있는데 하나의 체크박스를 클릭하고 다음 체크박스를 클릭하면 이전 체크박스의 선택이 취소됩니다. 이유를 아시나요? </p>
<p>이것은 내 체크박스 구성요소입니다: </p>
<pre class="brush:php;toolbar:false;">const Checkbox = ({ key, id, label, selected, name, onChange }:any) =>
반품 (
<div className="checkbox-wrapper">
<다중 키 입력={id} id={id} type="checkbox" selected={checked} name={name} onChange={onChange} />
<label htmlFor={id}>{label}</label>
</div>
)
}</pre>
<p>이것은 주요 구성 요소의 모습입니다. 데이터는 배열에 존재하고 매핑되지만 이전 확인란을 선택 취소하는 이유는 확실하지 않습니다. 다른 쓸모 없는 JSX 코드를 많이 제거했습니다. <
<pre class="brush:php;toolbar:false;">const checkboxList = [
{
아이디:0,
label:"대문자",
이름: "상단",
확인됨:거짓
},
{
아이디:1,
label:"소문자",
이름: "낮음",
확인됨:거짓
},
{
아이디:2,
label:"번호",
이름: "번호",
확인됨:거짓
},
{
아이디:3,
라벨:"기호",
이름: "기호",
확인됨:거짓
}
]
const PasswordGenerator = () =>
const [data, setData] = useState(checkboxList)
const handlerChange = (id:번호) =>
const updateCheckboxes = checkboxList.map((checkbox) =>
checkbox.id === id ? {...체크박스, 선택됨: !checkbox.checked}:체크박스)
setData(updateCheckboxes)
}
반품 (
<div className="요소">
{data.map((obj) => {
반품(
<div key={obj.id}>
<체크박스
다중={true}
id={obj.id}
라벨 = {obj.label}
확인됨= {obj.checked}
이름= {obj.name}
onChange = {() =>handleChange(obj.id)}
/>
</div>
)
})}
</div>
)
}</pre>
<p><br /></p>
상태를 업데이트하면 현재 상태가 아닌 원래 배열에서 업데이트됩니다. 원래 배열(checkboxList)에서 매핑하는 대신 상태(데이터)의 현재 값에서 매핑합니다.
으아악