小编典典

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

reactjs

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

单击孩子时,如何停止父事件触发?

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

  1. CSS ?单击子级时,
    pointer-events : none类追加到父级。但是,这意味着pointer-events以后需要清除父类。

  2. 使用Ref 吗?
    记录refReact元素的,然后单击子元素,将event.targetref与ref 进行比较?我不喜欢这样,因为我不喜欢全球化ref

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


阅读 279

收藏
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