如何在 React 中使用 2 个不同的 'THIS' 值答案

【问题标题】：How to use 2 different values of 'THIS' in React如何在 React 中使用 2 个不同的 'THIS' 值
【发布时间】：2025-12-03 08:15:01
【问题描述】：

所以我在组件中有这个函数：

clickedResultHandler = (embedLink) => {
    this.setState({embedSrcLink: embedLink});
}

这个函数在后代中被调用，如下所示：

<div onClick={() => props.clickedResult(embedSrcLink)} className="result">

我想做的是：当我点击这个 div（className='result'）时，我想用那个 div 做点什么。这意味着我需要访问 this 关键字，其中 this=被点击的 div。但是在函数定义中，我还需要访问 this 其中 this=定义函数的组件本身，以便我可以设置状态。

我环顾四周，仍然没有找到解决办法。

谢谢

【问题讨论】：

【解决方案1】：

你会得到event.target这样的：

<div onClick={(event) => props.clickedResult(event, embedSrcLink)} className="result">

clickedResultHandler = (event, embedLink) => {
    console.log(event.target);
    this.setState({embedSrcLink: embedLink});
}

目标事件属性返回触发事件的元素。

您也可以使用event.currentTarget，它始终引用其事件侦听器触发事件的元素。

【讨论】：

【解决方案2】：

您必须将Event 参数传递给clickedResultHandler 方法。

clickedResultHandler = (embedLink) => (e) {
    // e.currentTarget is your div
    this.setState({embedSrcLink: embedLink});
}

【讨论】：