Reactjs 如何在 React 中停止嵌套 Link 和 Button 组件的事件传播

发布于07月08日

我有一个电影项目列表，其中每个项目都包装在一个导航到电影详细信息页面的Reaction-Router-Dom Link组件中.在每个电影项目中，我都有一个"立即观看"按钮，可以在新的浏览器选项卡中打开相应的电影预告片.

我面临的问题是，当我点击"立即观看"按钮时，预告片会像预期的那样在一个新的选项卡中打开，但父链接也被激活，导致当前的选项卡导航到电影详细信息页面.我的目标是只在点击"立即观看"按钮之外的区域时才打开电影详细信息页面.

我曾try 在onClick处理程序中为"立即查看"按钮使用vent.stopPropagation()，以防止事件冒泡到父链接，但这并没有如我预期的那样起作用.每当我点击"立即观看"按钮时，父链接仍处于激活状态

以下是我使用的代码的简化版本:

<Link to={`/MovieDetail/${movie.id}`}>
    {/* Other elements */}
    <button
        onClick={(e) => {
            e.stopPropagation();
            window.open(`https://www.youtube.com/watch?v=${trailers[index]}`, '_blank');
        }}
    >
        Watch Now
    </button>
    {/* Other elements */}
</Link>

<Link to={`/MovieDetail/${movie.id}`}> {/* Other elements */} <button onClick={(e) => { e.preventDefault(); // <-- prevent default action e.stopPropagation(); window.open( `https://www.youtube.com/watch?v=${trailers[index]}`, "_blank" ); }} > Watch Now </button> {/* More elements */} </Link>

Reactjs 如何在 React 中停止嵌套 Link 和 Button 组件的事件传播

推荐答案

Reactjs相关问答推荐

全局上下文挂钩-替代不起作用

在Reaction中单击时，按钮未按预期工作

Reaction路由的问题-在Effect使用API调用响应设置状态之前呈现页面

React：关于useEffect钩子如何工作的困惑

React-router动态路径

如何隐藏移动导航栏后面的向下滚动图标和文本？

获取  不能显示为  的后代.错误，但不太确定如何构建我的代码以避免此警告

在 React 中将 MUI 样式外包到单独的文件中？

是的验证：使用 useFieldArray 访问表单值

如何在 React 中停止嵌套 Link 和 Button 组件的事件传播？

如何到达类组件中的状态？

如何保留我的下一个授权用户会话？所以我可以使用提供的 ID 在其他路由中获取数据

Github 页面无法正确呈现 CSS，因为它是本地的

页面加载时不显示数组中的数据

Select 建议后如何关闭 vscode 添加自动完成={}

如何将我的 ID 值传递给下一个组件？

在 Formik 表单中访问子组件的值

如何使用 babel 将 SVG 转换为 React 组件？

未捕获的错误：操作必须是使用 redux/toolkit 的普通对象

我可以在类组件中使用 useState 挂钩吗？