Question

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

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

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

如何根据被检查的复选框状态更新状态

1 个答案: