当前位置: 首页 > 面试题库 >

如何在reactjs中调用stopPropagation?

姚星腾
2023-03-14
问题内容

我想阻止点击事件起泡。因此,我在代码中添加了e.stopPropagation()。我总是在控制台中看到一个错误,那就是:Uncaught TypeError: e.stopPropagation is not a function

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

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

        ...

    },

问题答案:

正确的方法是使用.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

您的事件处理程序将传递SyntheticEvent实例,该实例是围绕浏览器本地事件的跨浏览器包装器。它具有与浏览器本机事件相同的接口,包括stopPropagation()和preventDefault(),不同之处在于这些事件在所有浏览器中均相同。
Event System



 类似资料:
  • 问题内容: 我是ReactJS的新手。以前,我使用jQuery设置所需的任何动画或功能。但是现在我正在尝试使用ReactJS并最小化jQuery的使用。 我的情况是: 我正在尝试使用ReactJS构建手风琴。 使用JQuery : 我的问题: 我该如何使用ReactJS? 问题答案: 您应该尝试避免在ReactJS中使用jQuery。但是,如果您真的想使用它,则可以将其放入组件的component

  • 除了使用DangerouslySetInnerHTML之外,还有其他的方法吗? 谢谢!

  • 我创建了两个按钮,并给onClick函数togglePopup并在顶部定义它。但是我很困惑如何应用在反应中。我在javaScript中应用了这个方法,我不知道它是如何在反应中工作的? 弹出式 弹出窗口.css

  • 问题内容: 我想在自己的内部加载Google API客户端库,并且会在单独的javascript文件中调用方法。然后,该方法将输出到控制台。 客户端库已加载,没有任何问题,但消息未从控制台打印出来,我认为这是因为根本没有调用该方法。 这是我的: 这是包含方法的javascript文件: 如果这是纯JavaScript,则该方法将如下所示: es6中是否有任何与对象相似的东西。 问题答案: 组件方法

  • 问题内容: 从官方教程中: 在卸载和销毁组件之前立即调用。使用此方法执行任何必要的清除,例如使计时器无效,取消网络请求或清除在其中创建的所有DOM元素。 我了解“使计时器无效”。可以用终止。但是我不理解“清理在中创建的任何DOM元素”,我可以看到这种情况的示例吗? 问题答案: 如果网络请求发送库支持中止正在进行的网络请求调用,则绝对可以在方法中调用该请求。 但是,与清理元素有关。根据目前的经验,我

  • React是否在每次调用时重新呈现所有组件和子组件? 如果是,为什么?我认为这个想法是,当状态改变时,只会根据需要提供少量的反应。 我希望只有在数据发生更改时才会出现呈现。 下面是示例的代码,作为JS Fiddle和嵌入的代码片段: