Question

您好，我的父亲及其孩子的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。

Answer 1

在函数中传递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内联函数移出了render方法，并使用“ this.nameOfClickMethod”对其进行了引用，nameOfClickMethod当然要根据您的选择来命名。

Answer 2

您可以使用event.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>

React / js on点击父div和子div。父母总是开除

2 个答案: