ReactJS，event.currentTarget与Vanilla Javascript具有不同的行为

Question

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

Vanilla 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

首先，您实际上并没有通过static List<Integer> sumDigPow(int a, int b) { List<Integer> eureka = new ArrayList<Integer>(0); List<String> digits = new ArrayList<String>(); String num; int sum = 0, multi; for (int i=a; i<=b; i++) { num = String.valueOf(i); digits.add(num); for (int j=0; j<digits.size(); j++) { multi = (int)Math.pow(Integer.parseInt(digits.get(j)), j+1); sum += multi; } if (sum == i) eureka.add(i); sum = 0; digits.clear(); } return eureka; } ，不确定这是否是错字，但应该出错。

此：

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中的模块中运行），而react将为您运行处理程序，这不是本机DOM事件，请购买综合产品。 因此，基本上运行这样的功能：

strict mode

将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);