React - 防止父事件触发子事件

Question

我有这种情况，当单击父元素时，它会翻转以显示具有不同颜色的子元素。不幸的是，当用户点击其中一种颜色时，父级上的“点击”事件也会被触发。

单击子项时如何停止父项上的事件触发器？

我想知道可能的解决方案：

1. CSS ？

单击子项时，将 pointer-events : none 类附加到父项。但是，这意味着稍后需要清除父级的 pointer-events 类。

1. 使用参考？

记录父元素的 ref React 元素并点击子元素，将 event.target 与 ref 进行比较我不喜欢这个，因为我不喜欢全局 ref 。

想法和更好的解决方案将不胜感激。问题是：单击子项时如何停止父项上的事件触发器？

原文由 Kayote 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

您可以使用 stopPropagation

stopPropagation - 阻止当前事件在冒泡阶段的进一步传播

 var App = React.createClass({
  handleParentClick: function (e) {
    console.log('parent');
  },

  handleChildClick: function (e) {
    e.stopPropagation();
    console.log('child');
  },

  render: function() {
    return <div>
      <p onClick={this.handleParentClick}>
        <span onClick={this.handleChildClick}>Click</span>
      </p>
    </div>;
  }
});

ReactDOM.render(<App />, document.getElementById('root'));

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

原文由 Oleksandr T. 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

我在 React 中遇到了同样的问题，并使用以下解决方案解决了它：

 if(e.currentTarget != e.target ) return;
.......

原文由 Johnson Fashanu 发布，翻译遵循 CC BY-SA 4.0 许可协议