React - 防止来自Child的Parent上的事件触发器

Question

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

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

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

1 - CSS？pointer-events : none单击子项时将类附加到父级.但是,这意味着父母将需要在pointer-events以后清理该类.

2 - 使用Ref？记录ref父React元素并在点击孩子时,将其event.target与ref 进行比较？我不喜欢这个,因为我不喜欢全球ref.

我们非常感谢思想和更好的解决方案.问题是:如何在单击子项时停止父项上的事件触发器？

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>

Answer 2

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

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

Answer 3

另一个解决方案是将以下内容附加到父级上的事件回调：

if(event.target == event.currentTarget){
  event.stopPropagation()
  ....
}

通过这种方式，您可以拦截源自附加 DOM 节点的事件，并将不相关的事件转发到下一个节点。