Javascript 按钮点击反应

我对React.js有问题。这是我的代码行：

import React, { useState } from "react";
import { map } from "lodash";

function Steps({ procedure, commandSender, index }) {
  const [selected, setSelected] = useState([]);

  function clickHandler(command, key, index) {
    commandSender(`${command}`)
    if (isSelected((index-key))) setSelected(selected.filter(s => s !== (index-key)))
    else ([...selected, (index-key)])
  }

  function isSelected(key) {
    return selected.includes(key);
  }

  return (
    <>
      {procedure.guide &&
        map(procedure.guide, (key) => (
          <a
            key={`${index}-${key}`}
            className={`bt-blue ${isSelected(index-key) ? "active" : ""}`}
            onClick={() => clickHandler('GUIDE', key, index)}
          >
            {procedure.title}
          </a>
        ))
      }
      {procedure.success &&
        map(procedure.success, () => (
          <a
            key={`${index}-${key}`}
            className={`bt-green ${isSelected(index-key) ? "active" : ""}`}
            onClick={() => clickHandler('SUCCESS', key, index)}
          >
            {procedure.title}
          </a>
        ))
      }
    </>
  );
}

export default Steps;

import React，{useState}来自“React”；
从“lodash”导入{map}；
函数步骤（{procedure，commandSender，index}）{
const[selected，setSelected]=useState（[]）；
函数clickHandler（命令、键、索引）{
commandSender（`${command}`）
if（isSelected（（索引键）））setSelected（selected.filter（s=>s！==（索引键）））
else（[…已选择，（索引键）]）
}
已选择功能（键）{
返回所选。包括（键）；
}
返回(
{程序指南&&
地图（程序指南，（键）=>(
clickHandler（'GUIDE'，key，index）}
>
{procedure.title}
))
}
{程序成功&&
map（procedure.success，（）=>(
clickHandler（'SUCCESS'，key，index）}
>
{procedure.title}
))
}
);
}
导出默认步骤；

如您所见，我映射了一个过程，并为每个项目创建了一个a标记，该标记调用函数clickHandler。此函数调用另一个函数并选择一个集合。setSelected函数表示是否单击了哪个标记。唯一的问题是，当我单击A标记时，它没有被选中

---

但我只需要我点击的标签就可以有选择的效果。我想对你们来说，这是一个很容易纠正的错误，但我真的是一个新手。请提供帮助。

我认为问题在于用于存储选定值的数据结构。现在，它是一个纯布尔值，您正在处理一个数组

const [selected, setSelected] = useState([]);

您可以执行以下操作：

首先，我们将选定的数组更改为数组

const [selected, setSelected] = useState([]);

那么，我们如何以独特的方式识别每个过程？他们有身份证吗？按头衔？指挥部？让我们假设它的标题

function clickHandler(title, command) {
    commandSender(`${command}`)

    if(selected.includes(title)) {
        setSelected(selected.filter(s => s !== title)) // we unselected our procedure
    } else {
        setSelected([...selected, title]) // we add our procedure to the selected
    }
}

最后，您应该更改过程的呈现，并删除

useffect

，因为这是不必要的

          <a
            className={`bt-green ${selected.includes(procedure.title) ? "active" : ""}`}
            onClick={() => clickHandler(procedure.title, 'SUCCESS')}
          >
            {procedure.title}
          </a>

---

链接之间没有区别，除了它们的内部文本。你应该给他们一个唯一的键或一些独特的东西，并使用它来了解哪个被点击了。明白了吗？好的，我给了他一把唯一的钥匙。但是我如何使用这个键来理解哪个被点击了呢？这是非常好的解释。但是现在，所有的项目都被选中了，我不能取消选择它们。我使用了键值，而不是标题。但我不认为这是问题所在。做上面的修改就可以了。你能在你的答案中发布你修改过的代码或者创建一个沙盒吗？这是两个函数和useffect:

const[selected，setSelected]=useState（false）；useffect（（）=>{setSelected（selected）}[selected]）函数clickHandler（command，key）{commandSender（

${command}

）if（isSelected（key））setSelected（selected.filter（s=>s！==key））else（[…selected，key]）}函数isSelected（procedure）{返回selected.includes（procedure）；}

您的

钥匙从哪里来？你也应该删除
useffect
语句。我会编辑这个问题，这样你就可以看到我做了哪些更改。现在，没有选择任何标记