在 React 中输入复选框值到数组答案

【问题标题】：Input Checkbox Values to Array in React在 React 中输入复选框值到数组
【发布时间】：2021-05-13 05:04:38
【问题描述】：

我有一个复选框，我希望它的值作为数组输出，只有为真的值。我的问题是它只输出真假值。我想将 name 的值作为数组输出为真

请在此处检查我的代码框 CLICK HERE

  const handleChange = (event) => {
    setCheckedItems({
      ...checkedItems,
      [event.target.name]: event.target.checked
    });
  };
  console.log(Object.values(checkedItems));

预期样本输出

['check-box-1', 'check-box-2']

【问题讨论】：

您应该能够访问 event.target 上的 name 属性。（事件.目标.名称）。那不行吗？
如果我理解如果两个框都被选中，你会得到什么，你会输出数组 ['check-box-1','check-box-2']？跨度>
我相信这应该可以工作console.log(Object.entries(checkedItems).filter((record) => record[1]).map((record) => record[0]));
@Andrew。编辑了我的问题
@kmmanoj 完美地回答了这个问题，检查您的代码没有什么可做的了。没有必要“减少”它。我希望 kmmanoj 将他的评论复制到答案中，以便您将其标记为答案。

标签： javascript reactjs ecmascript-6 react-hooks

【解决方案1】：

问题是您只记录值：console.log(Object.values(checkedItems)); 而不是实际状态。

要查看实际状态，您的日志应该只是console.log(checkedItems);。

要查看仅包含名称的所需输出，您的日志应为 console.log(Object.keys(checkedItems));

仅获取选中项的键：

console.log(Object.keys(checkedItems).filter(key => checkedItems[key]));

【讨论】：

谢谢，但我只想输出正确的值
@Joseph Object.keys(checkedItems).filter(key => checkedItems[key])