时间戳

首页 > 解决方案 > React/js onClick 父 div 和子 div。父母总是开火

javascript - React/js onClick 父 div 和子 div。父母总是开火

问题描述

你好，我在我的父母和它的孩子上使用 onClick 时遇到了问题，它触发了哪个 menuSection 出现。即使我点击孩子，它的父母部分也会出现。如果单击该元素，如何仅触发子元素？

    <div> onClick={() => props.onClick(MenuSection.Default)} >
          <div <span><InfoIcon /></span> Some info</div>
          <div>More Info</div>
          <div>Even more Info</div>
          <div onClick={() => props.onClick(MenuSection.NotDefault)}><InfoIcon /></div>
    </div>

所以这就是它的外观，它总是 MenuSection.Default 永远不会显示 MenuSection.NotDefault。

标签： javascriptreactjs

解决方案

在函数中传入 e 并使用

e.stopPropagation();

<div onClick={() => props.onClick(MenuSection.Default)} >
      <div <span><InfoIcon /></span> Some info</div>
      <div>More Info</div>
      <div>Even more Info</div>
      <div onClick={(e) => e.stopPropagation();props.onClick(MenuSection.NotDefault)}><InfoIcon /></div>
</div>

但我也会将 onClick 内联函数从渲染方法中移出并用“this.nameOfClickMethod”引用它，nameOfClickMethod 当然由您选择命名。

推荐阅读