react js中的onClick事件选择内部组件中存在的元素的子元素而不是父元素本身

赫萨姆

当我单击包括AnimatedMouse组件的div时，在控制台中登录的事件是AnimatedMouse组件的元素之一，而不是className为“动画鼠标”本身的div。

const AnimatedMouseScroll = () => {
    return (
        <div class="scroll-msg-container">
            <div class="scroll-msg-inner">
                <div class="scroll-msg-wheel">
                    click here
                </div>
            </div>
        </div>
    );
}

const EmployerService = () => {
    const scrollToNextSectionHandler = (event) => {
        console.log("clicked element", event.target)
    };

    return (
        <div className="animated-mouse" onClick={(e) => scrollToNextSectionHandler(e)}>
            <AnimatedMouseScroll />
        </div>
    );
}

ReactDOM.render(<EmployerService />, document.getElementById("root"));

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

TJ人群

target始终是被点击的最里面的目标元素。（这在DOM中是正确的，而不仅仅是React。）如果您希望将事件处理程序置于其中，请使用currentTarget：

console.log("clicked element", event.currentTarget )
// −−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−^

现场示例：

const AnimatedMouseScroll = () => {
 return (
       <div class="scroll-msg-container">
       <div class="scroll-msg-inner"  >
       <div class= "scroll-msg-wheel" >
       click here
       </div>
       </div>
       </div>
       );
}

const EmployerService = () => {
    const scrollToNextSectionHandler = (event) => {
   console.log("clicked element", event.currentTarget )
    };

  return (
      <div  className="animated-mouse"  onClick={(e) => scrollToNextSectionHandler(e)}>
    <AnimatedMouseScroll />
  </div>
       );
}

ReactDOM.render(<EmployerService/>, document.getElementById("root"));

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

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。