React检查事件是否在不使用Ref

Question

这是使用refs 的解决方案

import React, { useState, useRef } from "react";
function Bar() {
    const ref = useRef();
    return (
            <div
               ref={ref}
               onClick={(ev) => {
                  if (ev.target == ref.current) console.log("Target hit");
                }}
             >
              Click me, maybe <div>test</div>
            </div>
     );
}

在上述解决方案中，当我们点击测试时，目标不会被击中。我们能在不使用refs的情况下获得相同的输出

Answer 1

使用事件的currentTarget属性，它将始终引用它注册的元素，而不是触发它的元素target：

function Bar() {
    return (
            <div
               onClick={(ev) => {
                  if (ev.target === ev.currentTarget) console.log("Target hit");
                }}
             >
              Click me, maybe <div>test</div>
            </div>
     );
}