如何在反应中使用多个复选框并收集选中的复选框

Question

我目前正在开发一个可以选择多个复选框的过滤器组件。

现在我想切换复选框的状态（目前可行且有效）并将选中的复选框存储在一个数组中。

如果一个复选框未被选中，它当然应该从数组中删除。我试过 useState 钩子，但没有成功 --> 复选框被添加了多次，未选中的没有被删除..

这是当前状态：

  // Here I'm creating an array with a fixed size (based on the received data)
  const [checkboxState, setCheckboxState] = useState(new Array(receivedData.length).fill(false));
  // With this useState I wan't to collect the checked checkboxes
  const [checkedCheckboxes, setCheckedCheckboxes] = useState([]);
    
  // This is my handler method that gets triggered when a checkbox get's checked/unchecked
  // ..and toggles the state of the checkbox
  const handleCheckboxState = (position: number) => {
    const updatedCheckedState = checkboxState.map((item, index) => (index === position ? !item : item));
    setCheckboxState(updatedCheckedState);
    collectCheckedCheckboxes();
  };

  // With this method I wan't to push the checked checkboxes into the array
  // ..and remove the unchecked ones
  const collectCheckedCheckboxes = () => {
    checkboxState.map((item, index) => {
      if (item === true) {
        return checkedCheckboxes.push(receivedData[index]);
      } else {
        return checkedCheckboxes.slice(index, 1);
      }
    });
  };

复选框呈现如下：

  <div className="checkboxes">
    {receivedData?.map((data, index) => (
      <CheckBox
        value={data.value}
        checked={checkboxState[index]}
        onChange={() => handleCheckboxState(index)}
      />
    ))}
  </div>

我做错了什么？

Answer 1

您的CheckBox-组件不包含key 属性。这有助于 React 识别哪些项目已更改、添加或删除。

来源：https://reactjs.org/docs/lists-and-keys.html

我也不明白为什么你有两个状态，checkboxState 和 checkedCheckboxes。还有其他原因吗？我认为使用包含选中复选框的索引（或值）的单个状态会更容易。

[cmets 后更新]

以下代码是 OP 所需的解决方案，以使所选对象值处于 React 状态。

const { useState } = React;

const Checkboxes = () => {
  // With this useState I wan't to collect the checked checkboxes
  const [checkedCheckboxes, setCheckedCheckboxes] = useState([]);

  // This is my handler method that gets triggered when a checkbox get's checked/unchecked
  // ..and toggles the state of the checkbox
  const handleCheckboxChange = (data) => {
    const isChecked = checkedCheckboxes.some(checkedCheckbox => checkedCheckbox.value === data.value)
    if (isChecked) {
      setCheckedCheckboxes(
        checkedCheckboxes.filter(
          (checkedCheckbox) => checkedCheckbox.value !== data.value
        )
      );
    } else {
      setCheckedCheckboxes(checkedCheckboxes.concat(data));
    }
  };

  const receivedData = [{ value: "A" }, { value: "B" }, { value: "C" }];

  return (
    <>
      <div className="checkboxes">
        <h1>Checkboxes:</h1>
        {receivedData?.map((data, index) => (
          <input
            key={`cb-${index}`}
            value={data.value}
            type="checkbox"
            checked={checkedCheckboxes.some(checkedCheckbox => checkedCheckbox.value === data.value)}
            onChange={() => handleCheckboxChange(data)}
          />
        ))}
      </div>
      <div>
        <h1>State:</h1>
        <pre>{JSON.stringify(checkedCheckboxes, null, 2)}</pre>
      </div>
    </>
  );
};

ReactDOM.render(<Checkboxes />, document.getElementById("app"));