使每个元素特定于onClick事件

Question

当类是"transporation“时，我想添加一个边框，但是当我单击其中一个图标时，所有图标都变为活动的。我只想让点击的那个变得活跃起来。这是用于选择类别的。我的反应代码是这样的：

    const [transportationClick, setTransportationClick] = useState(false);
      const handleTransportationClick = () => setTransportationClick(!transportationClick);
    
/* where I use it */

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

Answer 1

问题是，所有的图标都共享相同的状态，这将导致所有图标在单击其中一个图标时变为活动状态。解决这个问题的方法有几种--您可以将每个图标重构为它自己的组件：

const Icon = ({ icon }) => {
  const [transportationClick, setTransportationClick] = useState(false);
  const handleTransportationClick = () => setTransportationClick(!transportationClick);

  return (
    <div className={transportationClick ? "transportation active" : "transportation"} onClick={handleTransportationClick}>
       <div className="transportation-icon">
         {icon}
       </div>
    </div>
  )
}

const Parent = () => {
  return (
    <div className="transportation-types">
      <Icon icon={<FaCar />} />
      <Icon icon={<FaBus />} />
      <Icon icon={<FaWalking />} />    
   </div>
  )
}

或将状态设置为与显示图标的顺序相对应的索引：

const Parent = () => {
  const [transportationClick, setTransportationClick] = useState(0)

  return (
    <div className="transportation-types">
      <div
        className={transportationClick === 0 ? 'transportation active' : 'transportation'}
        onClick={() => setTransportationClick(0)}
      >
        <div className="transportation-icon">
          <FaCar />
        </div>
      </div>
      <div
        className={transportationClick === 1 ? 'transportation active' : 'transportation'}
        onClick={() => setTransportationClick(1)}
      >
        <div className="transportation-icon">
          <FaBus />
        </div>
      </div>
      <div
        className={transportationClick === 2 ? 'transportation active' : 'transportation'}
        onClick={() => setTransportationClick(2)}
      >
        <div className="transportation-icon">
          <FaWalking />
        </div>
      </div>
    </div>
  )
}