Reactjs 如何根据选中的复选框状态更新状态

我有一堆带有以下标记的复选框

<input type='checkbox' data-id='123' data-label='abc' ref={checkboxRef} />
<input type='checkbox' data-id='456' data-label='xyz' ref={checkboxRef} />

我想做的是根据是否选中复选框，用复选框数据的对象更新状态。如果选中，则将其数据添加到状态，如果未选中，则将其删除

选中复选框后的预期状态

[
  { id: '123', label: 'abc' }
]

我现在已经使用了一个ref来访问输入并获取它的数据，但是我不知道如何更新状态

const handleToggle = () => {
  setIsChecked(prevState => !isChecked)
  const id = checkboxRef.current.getAttribute('data-id')
  const label = checkboxRef.current.getAttribute('data-label')
}

---

我已经解决了。在这里检查一下

完整代码如下：

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>
  );
}

---

更新状态是你的问题吗？是的。如果选中复选框，则其数据将作为对象添加到状态中，如果未选中，则将删除状态中已存在的对象

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>
  );
}