点击元素调用带参函数时无法在函数内获取event对象的问题

你当前的问题核心是：onClick的箭头函数回调没有传递事件对象（event）给handleClickTextChange，导致函数内部的e参数为undefined，调用e.currentTarget时抛出异常。

直接修复方案 #

调整onClick的回调写法，在箭头函数中接收事件参数并传递给目标函数：

<div
    onMouseEnter={handleOnMouseEnterDetailButton}
    onMouseLeave={handleOnMouseLeaveDetailButton}
    onClick={(e) => handleClickTextChange(item.turkishWord, item.englishWord, e)}
    className={styles.container_single_card}
    key={index}
></div>

修改后，handleClickTextChange就能正常获取event对象，e.currentTarget也会正确指向触发点击的<div>元素。

额外优化建议 #

你代码中直接操作DOM元素（getFirstChildElement、getParentElement）的写法不符合React的设计理念，推荐通过**状态（state）**管理UI变化，避免潜在的DOM操作冲突：

// 组件内部维护卡片状态
const [cardStates, setCardStates] = useState({});

const handleClickTextChange = (eng, tr, index, e) => {
    console.log(e.currentTarget);
    // 更新对应卡片的显示状态
    setCardStates(prev => ({
        ...prev,
        [index]: {
            showEnglish: !prev[index]?.showEnglish
        }
    }));
};

// 渲染时用状态控制文本和类名
<div
    onMouseEnter={handleOnMouseEnterDetailButton}
    onMouseLeave={handleOnMouseLeaveDetailButton}
    onClick={(e) => handleClickTextChange(item.turkishWord, item.englishWord, index, e)}
    className={`${styles.container_single_card} ${cardStates[index]?.showEnglish ? styles.container_single_card_changing : ''}`}
    key={index}
>
    {cardStates[index]?.showEnglish ? item.englishWord : item.turkishWord}
</div>

这种方式遵循React单向数据流，能让代码更易维护和调试。

内容的提问来源于stack exchange，提问作者Utku Ergün