在 useState 数组中推送一个数字答案

【问题标题】：Push a number in useState array在 useState 数组中推送一个数字
【发布时间】：2021-04-21 08:40:54
【问题描述】：

在具有多个复选框的表单中，我想在单击提交后将复选框的值存储在 useState 数组中。此外，用户可以在提交表单之前多次选中/取消选中复选框。方法/代码可以是什么？

【问题讨论】：

到目前为止您尝试过什么？这听起来像是标准的反应表单方法。
我曾尝试将复选框的值存储在初始化为 0 的单独 useState 变量中，然后检查是否 checkBox1value>0 然后 setAllcheckbox(old=>{...old,checkBox1value}) 类似地检查其他复选框。

【解决方案1】：

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

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}
/>

【讨论】：

【解决方案2】：

您可以通过多种方式制作它。您可以只创建const checkboxOpenArray = []，您将在其中存储布尔值，如[true, false, false, true]，所以稍后在代码中您可能通过所有复选框检查.map，您只需检查checkboxOpenArray[idx]，其中idx 您从.map 获得。如果为真，您只需将复选框设置为真。 onChange 也一样 - 您只需在 checkboxOpenArray 中找到 idx 并将其设置为 false 或 true。

【讨论】：