React 为每个元素制作特定的 onClick 事件答案

【问题标题】：React making onClick event spesific for each elementReact 为每个元素制作特定的 onClick 事件
【发布时间】：2022-07-07 16:00:52
【问题描述】：

我想在课程“运输活动”时添加一个边框，但是当我单击其中一个图标时，它们都将变为活动状态。我只希望被点击的那个变得活跃。这是用于选择类别。我的反应代码是这样的：

const [transportationClick, setTransportationClick] = useState(false);
  const handleTransportationClick = () => setTransportationClick(!transportationClick);

/* 我使用它的地方 */

<div className="transportation-types">
              <div className={transportationClick ? "transportation active" : "transportation"} onClick={handleTransportationClick}>
                <div className="transportation-icon">
                  <FaCar />
                </div>
              </div>
              <div className={transportationClick ? "transportation active" : "transportation"} onClick={handleTransportationClick}>
                <div className="transportation-icon">
                  <FaBus />
                </div>
              </div>
              <div className={transportationClick ? "transportation active" : "transportation"} onClick={handleTransportationClick}>
                <div className="transportation-icon">
                  <FaWalking />
                </div>
              </div>
            </div>

【问题讨论】：

标签： javascript html reactjs react-hooks frontend

【解决方案1】：

您使用相同的 usestate 变量并检查所有图标，这就是它突出显示所有图标的原因。为不同的图标创建不同的使用状态并创建

【讨论】：