反应-防止父母触发孩子的事件触发

小编典典

反应-防止父母触发孩子的事件触发

reactjs

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

单击孩子时，如何停止父事件触发？

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

CSS ？单击子级时，
将pointer-events : none类追加到父级。但是，这意味着pointer-events以后需要清除父类。
使用Ref 吗？
记录ref父React元素的，然后单击子元素，将event.targetref与ref 进行比较？我不喜欢这样，因为我不喜欢全球化ref。

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

阅读 282

2020-07-22

共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>

2020-07-22