在 useState 数组中推送一个数字

Question

在具有多个复选框的表单中，我想在单击提交后将复选框的值存储在 useState 数组中。此外，用户可以在提交表单之前多次 check/uncheck 一个复选框。 approach/code 可以是什么？

Answer 1

您可以通过多种方式实现。您可以将 const checkboxOpenArray = [] 设置为只存储 [true, false, false, true] 等布尔值的位置，因此稍后在代码中您可能 .map 通过所有复选框检查是否 checkboxOpenArray[idx] 其中 idx 你从 .map 得到。如果是真的，你只需将复选框设置为真。 onChange 相同 - 您只需在 checkboxOpenArray 中找到 idx 并将其设置为 false 或 true。

Answer 2

每个复选框都有一个“已选中”属性，因此在 state 中，您必须有一个包含所有已选中复选框的数组。

const [selectedCheckboxes, setSelectedCheckboxes] = useState([]);

例如，您还可以将复选框存储在一个数组中：

const checkboxes = [{name: 'cb1', label:'cb1'}, {name: 'cb2', label:'cb3'}, ...];

而且它们都应该有相同的 onChange 方法：

onCheckBoxChange = (event) => {
const selectedCheckboxes = [...selectedCheckboxes];
const isChecked = selectedCheckboxes.includes(event.target.name);
if (!isChecked) {
  selectedCheckboxes.push(event.target.name);
} else {
  selectedCheckboxes.splice(selectedCheckboxes.indexOf(event.target.name), 1);
}
setSelectedCheckboxes(selectedCheckboxes);

};

验证复选框是否被选中的常用函数：

isChecked = (cb) => selectedCheckboxes.includes(cb.name);

每个复选框应该如下所示：

   <CheckBox
  name={cb.name}
  checked={isChecked(cb)}
  onChange={onCheckBoxChange}
  {...props}
/>

在 useState 数组中推送一个数字

Push a number in useState array

reactjs

react-hooks

use-state