Javascript React - 防止父子事件触发

React - Prevent Event Trigger on Parent From Child

提问by Kayote

I have this scenario, where when parent element is clicked, it flips to show a child element with different colours. Unfortunately, when the user clicks on one of the colours, the 'click' event on parent is also triggered.

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

How can I stop the event trigger on parent when the child is clicked?

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

Possible solutions I am wondering:

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

1. CSS?
   Append pointer-events : noneclass to the parent when the child is clicked. However, this would mean that the parent will need to be cleansed of the pointer-eventsclass later.

2. Using Ref?
   Record the refof the parent Reactelement & upon click on the child, compare the event.targetagainst the ref? I don't like this because I don't like the global ref.

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

2. 使用参考？
   记录ref父React元素的 ＆ 在单击子元素时，将event.target与 ref进行比较？我不喜欢这个，因为我不喜欢 global ref.

Thoughts and the better solution would be much appreciated. The question is: How can I stop the event trigger on parent when the child is clicked?

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

回答by Alexander T.

You can use stopPropagation

您可以使用 stopPropagation

stopPropagation- Prevents further propagation of the current event in the bubbling phase

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>

回答by Mayur Nandane

I wanted to invoke function on props but at the same time wanted to stop event propagation from child to parent, here is how its handled

我想在道具上调用函数，但同时又想停止从子级到父级的事件传播，这是它的处理方式

class LabelCancelable extends Component {

  handleChildClick(e) {
    e.stopPropagation()
  }
  closeClicked(e, props) {
    e.stopPropagation();
    props.onCloseClicked()
  }

  render() {
    const {displayLabel} = this.props;
    return (
      <span className={ "label-wrapper d-inline-block pr-2 pl-2 mr-2 mb-2" } onClick={ this.handleChildClick }>
          <button type="button" className="close cursor-pointer ml-2 float-right" aria-label="Close"
              onClick={(e) => this.closeClicked(e, this.props) }>
              <span aria-hidden="true">&times;</span>
          </button>
          <span className="label-text fs-12">
            { displayLabel }
          </span>
      </span>
    );
  }
}

export default LabelCancelable;