React实现点击交通分类图标仅当前项添加active类激活

你使用了单个布尔值transportationClick作为所有交通选项的激活判断依据，所有选项的类名逻辑都绑定这同一个状态，点击任意项都会全局切换这个布尔值，必然导致所有选项同步变更激活状态。

将状态改为存储当前激活选项的唯一标识，点击时更新状态为对应选项的标识，渲染时逐次判断当前选项标识与状态值是否一致，一致才追加active类。

修正后可直接运行的代码：

import { useState } from 'react';
import { FaCar, FaBus, FaWalking } from 'react-icons/fa';

// 交通选项配置，后续新增选项直接在数组中添加即可
const TRANSPORT_LIST = [
  { id: 'car', icon: <FaCar /> },
  { id: 'bus', icon: <FaBus /> },
  { id: 'walking', icon: <FaWalking /> }
];

const TransportationSelector = () => {
  // 存储当前激活的选项ID，默认无选中项，需要默认选中直接传对应ID即可
  const [activeId, setActiveId] = useState('');

  return (
    <div className="transportation-types">
      {TRANSPORT_LIST.map(item => (
        <div
          key={item.id}
          className={`transportation ${activeId === item.id ? 'active' : ''}`}
          onClick={() => setActiveId(item.id)}
        >
          <div className="transportation-icon">
            {item.icon}
          </div>
        </div>
      ))}
    </div>
  );
};

export default TransportationSelector;

扩展：支持点击取消选中 #

如果需要点击已激活的选项时取消选中状态，把点击逻辑替换为以下即可：

onClick={() => setActiveId(prev => prev === item.id ? '' : item.id)}

内容的提问来源于stack exchange，提问作者rustinmetal