如何在reactjs中调用stopPropagation? [英] How to call stopPropagation in reactjs?

问题描述

我想阻止点击事件冒泡.因此，我在代码中添加了 e.stopPropagation().我总是在控制台中出错，说:Uncaught TypeError: e.stopPropagation is not a function

在 reactjs 中设置 stopPropagation 的正确方法是什么?

 handleClick: function(index, e) {e.stopPropagation();...},

解决方案

正确的做法是使用.stopPropagation,

var Component = React.createClass({handleParentClick:函数(){console.log('handleParentClick');},handleChildClick:函数(e){e.stopPropagation();console.log('handleChildClick');},渲染:函数(){return 
<p onClick={this.handleChildClick}>Child</p>
;}});

示例

<块引用>

您的事件处理程序将传递 SyntheticEvent 的实例，一个浏览器原生事件的跨浏览器包装器.它具有与浏览器的本机事件相同的界面，包括stopPropagation() 和 preventDefault()，除了事件工作在所有浏览器中相同.事件系统

I want to stop the click event from bubling up. Therefore I added e.stopPropagation() in my code. I always get a mistake in the console, that says: Uncaught TypeError: e.stopPropagation is not a function

What is the right way to set the stopPropagation in reactjs?

      handleClick: function(index, e) {
        e.stopPropagation();

        ...

    }, 

解决方案

The right way is to use .stopPropagation,

var Component = React.createClass({
  handleParentClick: function() {
    console.log('handleParentClick');
  },

  handleChildClick: function(e) {
    e.stopPropagation();

    console.log('handleChildClick');
  },

  render: function() {
    return <div onClick={this.handleParentClick}>
      <p onClick={this.handleChildClick}>Child</p>
    </div>;
  }
});

Example

Your event handlers will be passed instances of SyntheticEvent, a cross-browser wrapper around the browser's native event. It has the same interface as the browser's native event, including stopPropagation() and preventDefault(), except the events work identically across all browsers. Event System

这篇关于如何在reactjs中调用stopPropagation?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！