我有一堆带有以下标记的复选框
<input type='checkbox' data-id='123' data-label='abc' ref={checkboxRef} />
<input type='checkbox' data-id='456' data-label='xyz' ref={checkboxRef} />
以及最初设置为空数组的状态
const [contacts, setContacts] = useState([])
我要做的是根据是否已选中复选框数据对象来更新状态。如果选中,则将其数据添加到状态,如果未选中,则将其删除。
选中复选框后的预期状态
[
{ id: '123', label: 'abc' }
]
我现在已经对输入使用了引用,并获取了输入的数据,但无法弄清楚如何更新状态。
const handleToggle = () => {
setIsChecked(prevState => !isChecked)
const id = checkboxRef.current.getAttribute('data-id')
const label = checkboxRef.current.getAttribute('data-label')
}
答案 0 :(得分:-1)
我已经解决了。在这里检查。
https://codesandbox.io/s/affectionate-fermi-f6bct
完整的代码在这里
import React, { useState } from "react";
import "./styles.css";
export default function App() {
const [contacts, setContacts] = useState([]);
const ref1 = React.createRef();
const ref2 = React.createRef();
const handleClick = (ref) => {
const id = ref.current.getAttribute("data-id");
const label = ref.current.getAttribute("data-label");
if (contacts.map((e) => e.id).includes(id)) {
setContacts(contacts.filter((e) => e.id !== id));
} else {
setContacts([...contacts, { id, label }]);
}
console.log(contacts);
};
return (
<div className="App">
<input
type="checkbox"
data-id="123"
data-label="abc"
ref={ref1}
onClick={() => {
console.log("hi");
handleClick(ref1);
}}
/>
<input
type="checkbox"
data-id="456"
data-label="xyz"
ref={ref2}
onClick={() => handleClick(ref2)}
/>
</div>
);
}