확인란을 클릭하면 React에서 이전 선택이 취소되는 이유는 무엇입니까?
P粉729198207
P粉729198207 2023-08-13 10:57:24
0
1
649
<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>
P粉729198207
P粉729198207

모든 응답(1)
P粉662361740

상태를 업데이트하면 현재 상태가 아닌 원래 배열에서 업데이트됩니다. 원래 배열(checkboxList)에서 매핑하는 대신 상태(데이터)의 현재 값에서 매핑합니다.

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