时间戳

首页 > 解决方案 > 如何使用 react-router-dom 防止事件冒泡？

javascript - 如何使用 react-router-dom 防止事件冒泡？

问题描述

好的。所以我有这样的东西。

我在整个帖子周围添加了链接，以为我可以停止单个按钮的冒泡，但是 stopPropagation() 没有按预期工作。

我已将按钮操作拆分为一个单独的组件，这是另一篇关于该主题的帖子所建议的，但这并没有起到作用。我假设这与它是一个 react-router-dom 链接这一事实有关，但它可能是别的东西。

有任何想法吗？ 

import React from 'react';
import { Link } from 'react-router-dom';

const MyComponent = ({
  doSomething
})=>(
  <Link to={`/some/url`}>
  <div className="post">
    <span className="button" onClick={e=>{
      e.stopPropagation();
      doSomething();
    }}>My Button</span>
  </div>
  </Link>
)

标签： javascripthtmlreactjsjsxreact-router-dom

解决方案

应该管用：

e.preventDefault()

更详细的解释：stopPropagation/preventDefault behavior on an element inside a link

另外，stopPropagation是一个函数，它正在等待被调用。

推荐阅读