我有这样一个场景，当单击父元素时，它会翻转以显示具有不同 colored颜色 的子元素.不幸的是，当用户点击其中一种 colored颜色 时，也会触发家长的"点击"事件.
How can I stop the event trigger on parent when the child is clicked?个
可能的解决方案我想知道:
CSS?
Using Ref？
单击子元素时，记录父React元素的ref，将event.target与参考进行比较？我不喜欢这样，因为我不喜欢全球ref强.
我们将非常感激您的 idea 和更好的解决方案.问题是: 单击子对象时如何停止父对象上的事件触发器？
你可以用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>