React项目中如何获取box_id参数并通过setIsHovering修改状态？

核心问题 #

1. 事件绑定错误：当前用onClick绑定鼠标交互逻辑，无法触发hover状态更新，需替换为onMouseOver（鼠标移入）和onMouseOut（鼠标移出）事件。
2. 状态更新逻辑错误：
   • 直接写{box_id: true}会生成键名为字符串"box_id"的对象，而非传入的box_id变量值，需用ES6计算属性名（[box_id]）动态设置键名。
   • 每次更新时直接替换整个状态对象，会丢失其他box的状态，需展开原有状态（...prevState）后再修改目标属性。

修正后的代码 #

import { useState } from 'react';

const YourComponent = () => {
  const [isHovering, setIsHovering] = useState({
    box1: false,
    box2: false,
    box3: false,
    box4: false
  });

  const handleMouseOver = (box_id) => {
    // 基于最新状态更新，仅修改目标box的hover状态
    setIsHovering(prevState => ({
      ...prevState,
      [box_id]: true
    }));
  };

  const handleMouseOut = (box_id) => {
    setIsHovering(prevState => ({
      ...prevState,
      [box_id]: false
    }));
  };

  return (
    <div className="service_body_element">
      <div 
        className={`service_body_el ${isHovering.box1 ? 'hover-active' : ''}`}
        onMouseOver={() => handleMouseOver("box1")}
        onMouseOut={() => handleMouseOut("box1")}
      >
        <img src="" alt="" className="service_body_el_img"/>
        <h3 className="service_body_el_title">Business<br/>Advisory</h3>
      </div>
      {/* 其余box可按相同逻辑添加 */}
      <div 
        className={`service_body_el ${isHovering.box2 ? 'hover-active' : ''}`}
        onMouseOver={() => handleMouseOver("box2")}
        onMouseOut={() => handleMouseOut("box2")}
      >
        {/* box2内容 */}
      </div>
    </div>
  );
};

export default YourComponent;

额外说明 #

• 若不需要事件对象e，可直接移除参数，简化函数调用。
• 通过模板字符串给元素添加hover类名（如hover-active），可快速实现hover样式变化。
• 使用函数式更新（prevState => ...）确保每次更新基于最新状态，避免状态覆盖问题。

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