javascript - ReactJS，event.currentTarget 没有与 Vanilla Javascript 相同的行为

Question

我想知道 ReactJS 中是否存在类似 event.currentTarget 的东西，使用 event.target onclick 的问题是我得到了 childDiv而不是 parentDiv。

普通 Javascript 示例:

document.getElementById("parentDiv").onclick = function() {
    console.log(event.currentTarget.id); // or this.id
    console.log(event.target.id);
};

<div id="parentDiv">Parent (click me)
    <div id="childDiv">Child (then click me)</div>   
</div>

ReactJS，(在无状态函数中):

...
const myFunction = (event) => {  
    event.stopPropagation(); // Doesn't make a difference.
    console.log(event.target); // Not trying to get the child element
    console.log(this); // 'this' is undefined
    console.log(event.currentTarget); // Gets the '#document' element
};
...
<div onClick={() => myFunction(event)}>...</div>
...

我敢肯定对于这个基本的东西有多种解决方案，我很惊讶我找不到讨论这个的线程。有什么建议吗？

Answer 1

首先你实际上并没有通过 event ，不确定这是否是错字，但应该是错误的。

这个:

onClick={() => myFunction(event)}>...</div>

应该这样写:

onClick={(event) => myFunction(event)}>...</div>

其次，不需要传递一个新的函数，只需要传递对已经存在的函数的引用myFunction .

<div onClick={myFunction}>

如您在以下代码片段中所见，代码按预期运行:

它将打印:

<div>click me</div>
undefined
<div>click me</div>

请注意父级的第二个处理程序 div没有被触发，这证明event.stopPropagation()正在工作。

至于为什么this未定义是因为您可能运行 strict mode 中的代码(或在默认情况下位于 strict mode 中的模块内)并且 React 将为您运行处理程序，这不是合成的原生 DOM 事件。
所以基本上运行这样的功能:

myFunc()

将设置 this到窗口(或在严格模式下为 undefined)

这是我做的图表，也许它可以帮助你

function App() {
  const myFunction = event => {
    event.stopPropagation(); // works as expected
    console.log(event.target); // Gets <div>click me</div>
    console.log(this); // 'this' is undefined
    console.log(event.currentTarget); // Gets <div>click me</div>
  };
  const myFunc2 = e => {
    console.log("myFunc2");
  };
  return (
    <div onClick={myFunc2}>
      <div onClick={myFunction}>click me</div>
    </div>
  );
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<div id="root" />