2021-12-15 react ＜a＞里的href实现不跳转

最新推荐文章于 2023-03-15 02:27:23 发布
最新推荐文章于 2023-03-15 02:27:23 发布
阅读量1.3k 收藏 1
点赞数
分类专栏： 常见问题 文章标签： react.js javascript 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/janfiveee_/article/details/121956669
版权

第一种 页面不跳转但会刷新

<a href="#" onClick={() => {
            this.handleEdit(item)
          }}>
            备注
          </a>

第二种 页面不跳转

<a href="#" onClick={(e) => {
            e.preventDefault();
            this.handleEdit(item)
          }}>
            备注
          </a>

从这个地方学到的

Janfiveee_
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
cra-ts-pro-reactRouter6-rtk
weixin_57135131的博客
03-06 754
基于react的购物网站后台管理系统保姆级代码
React 中保存页面状态/在react中实现vue的keep-alive/React Activation
weixin_38649188的博客
07-08 4293
1.背景 用户访问了一个列表页，点击查进入详情页，从详情页退回列表页时，需要停留在离开列表页时的浏览位置上 *在 React 中，我们通常会使用路由去管理不同的页面，而在切换页面时，路由将会卸载掉未匹配的页面组件，所以上述列表页例子中，当用户从详情页退回列表页时，会回到列表页顶部，因为列表页组件被路由卸载后重建了，状态被丢失。* 2.常见的解决方式 (1)手动保存状态：配合 React 组件的 componentWillUnmount 生命周期通过dva、 redux 之类的数据流管理工具对数据进行保存，
React Router如何在url参数不同的情况下跳转页面不更新解决方案
01-20
React Router如何在url参数不同的情况下跳转页面不更新解决方案说明解决方案及思路componentWillReceiveProps（nextProps） 说明 场景如下： {item.productName} 当前页面相同的url参数不同，并不会去重新触发我们的componentDidMount函数。所以导致页面不会更新。 解决方案及思路 此时，我们就需要用到react生命周期中的componentWillReceiveProps函数。 componentWillReceiveProps（nextProps） 组件初次渲染时不会执行componentWillReceivePro
react使用a标签 不跳转
m0_59855881的博客
05-21 988
{/* ！# react特殊用法 */} <a className="ant-dropdown-link" href="!#" onClick={(e) => e.preventDefault()} >
<a>标签无跳转
weixin_33976072的博客
08-23 90
以下内容不是新技术，是个人的一些整理，确实有借鉴其他闪文的地方，请原文作者谅解。 　　前不久做网站时，用到导航栏这种东西，随便从脚本之家上搜了一种效果了事。具体情况是，导航栏父级菜单没有链接功能，鼠标移上去显示子菜单列表即可。于是我的脚本是这样修改的，如下： <a href="javascript://">父级菜单</a> 　　结果是这种写法在一些浏览器下不能...
react和原生js如何禁用a标签的href阻止链接跳转
Kristen的博客
01-19 4073
在a标签的href有链接地址不为空的情况下，如何阻止a标签的跳转？原生js的情况reactjs的情况 首先，a标签属性的执行顺序是先执行onClick属性，然后再执行href，所以我们可以在onClick中对跳转进行处理 原生js的情况 <a href="http://xxxx.xx" onclick="return false;"> reactjs的情况 在react中，return false就不适用了，但我们可以通过preventDefault来实现阻止跳转 <a href="ht
react的＜a＞＜/a＞必须提供一个有效的href属性
hdj0511的博客
10-14 811
“The href attribute requires a valid value to be accessible. Provide a valid, navigable address as the href value.”
面试宝典 v2-新增Vue和React.pdf
09-13
15. HTML语义化：通过使用适当的标签（如<header>、<nav>、<article>等）来表达内容的结构和意义，有助于屏幕阅读器和搜索引擎理解页面内容。 16. SEO优化：关键词优化、元标签使用、URL结构、内部链接、移动友好、...
React项目案例-影视资源网站
前端高薪进击手记
03-15 800
项目地址：https://github.com/denghuiquan/aimovie
前端开发及登录功能实现--Django播客系统(九)
兰枫
09-25 1040
前端开发及登录功能实现–Django播客系统(九) 文章目录前端开发及登录功能实现--Django播客系统(九)开发环境设置开发前端路由Route指令登录组件注册组件导航栏链接分层登录功能实现UserService的login方法实现token持久化--LocalStorageMobx状态管理跳转Login登录功能代码实现 开发环境设置 使用react-mobx-starter-master脚...
React PureComponent导致react-router-dom Link 失效 路由跳转失败(地址栏变，页面不跳转)
知识改变一切
10-28 1976
加载路由的组件 不能 extends PureComponent entry.js import React, { Component } from 'react' import { BrowserRouter } from 'react-router-dom' import { renderRoutes } from 'react-router-config' import { Provi...
React中使用动态创建的a标签href属性异步下载文件
ThisEqualThis的博客
07-15 3696
需求：点击Table列表中的文件名称，触发click事件，然后dispatch调取后台接口，根据返回值来确定是否下载文件。 这里面因为涉及到了后台api，所以是异步行为，这时候不能直接给a标签href属性赋值，因为点击a标签的时候会同时执行onClick方法和href属性，所以这里使用document.createElement(‘a’)动态生成a标签来实现异步下载文件的操作。 1、Table中，在"文件名称"后面增加一个下载按钮来触发click事件： columns = [{ title: '文件名
解决 react ＜a＞ 标签 href=“javascript:；“ console warning 问题
weixin_43837305的博客
11-02 2608
项目场景： 我们在使用 a 标签时，href属性可以用于指定超链接目标的 URL，其值可以使任何有效文档的相对的或绝对的 URL，包括片段标识符和 JavaScript 代码段。用户选择了 a 标签中的内容，浏览器会尝试检索并展示 href 属性指定的 url 所表示的文档，或者 执行 JavaScript 表达式、方法和函数的列表。 若用户不想用 a 标签的跳转能力时，而要使用自己绑定的 click 事件，往往会通过插入 js 代码段的方式，设置 href 值为javascript:;或javascrip
react中的a标签href引发重新渲染
weixin_34167043的博客
04-16 7337
现象：<li><a href="#">关于我们</a></li> 点击会使页面刷新，所以改变数据会误以为不生效； 所以要用：<li><a href="javascript:void(0)">关于我们</a></li> <li><a href="#">关于我们</a&...
window.location.href无法跳转的解决办法
12-23 1055
-------------------接手别人做的SSO单点登录项目，无源码，只是点击登出按钮一直不跳转。 原因是： <a href="javascript:;" onclick="logout();">注销</a> 这个标签中需要为onclick方法后加return:false; 修改后: <a href="javascript:;" oncli...
react 遇到的问题
TO_Web的博客
07-20 130
1. 在使用react-redux时, 没有在组件内跳转, 在js文件中使用window.location.href 跳转到另一个b组件, 在b组件中返回时, 无法再次执行componentDidMount, 或者componentWillMount中的方法, 2.setState 自减的问题
react之禁止＜a＞标签响应
enjoy.day
06-08 1397
禁用a标签
React中ESLint对a标签href属性警告
Korbin的博客
09-08 1831
问题描述 在React中如果使用了a标签，但是又没有给a标签的href属性赋值有效的链接地址，则ESLint会警告，看着很烦。 The href attribute is required for an anchor to be keyboard accessible. Provide a valid, navigable address as the href value. If you cannot provide an href, but still need the element to resem
a标签不跳转
sinat_38992528的博客
12-06 1923
a标签href不跳转 禁止跳转 当页面中a标签不需要任何跳转时，从原理上来讲，可分如下两种方法： 标签属性href，使其指向空或不返回任何内容。如： 点此无反应javascript:void(0) 点此无反应javascript: 标签事件onclick，阻止其默认行为。如： return false; return false; 注意：只有
react hooks使用mhtml-to-word怎么给页面HTML中的 <div className={"table-weekday"}> <div className={"big-header"}> <div className={"big-title-left"}>早高峰</div> <div className={"big-title-right"}>晚高峰</div> </div> <div className={"small-header"}> <div className={"morning-peak-ranking"}>排名</div> <div className={"morning-peak-station"}>车站</div> <div className={"morning-peak-inbound-volume"}>进站量/人</div> <div className={"morning-peak-corresponding-period-last-year"}> 上年同比 </div> <div className={"morning-peak-proportion-whole-day"}>全天占比</div> <div className={"evening-peak-ranking"}>排名</div> <div className={"evening-peak-station"}>车站</div> <div className={"evening-peak-inbound-volume"}>进站量/人</div> <div className={"evening-peak-corresponding-period-last-year"}> 上年同比 </div> <div className={"evening-peak-proportion-whole-day"}>全天占比</div> </div>设置成表格样式显示
最新发布
06-02
你可以使用mhtml-to-word库将页面HTML转换成Word文档，并且设置表格样式来显示这些数据。以下是一个示例代码片段，可以帮助你实现该功能： ```jsx import mhtmlToWord from "mhtml-to-word"; const data = [ { morningPeakRanking: 1, morningPeakStation: "Station A", morningPeakInboundVolume: 100, morningPeakCorrespondingPeriodLastYear: "+10%", morningPeakProportionWholeDay: "50%", eveningPeakRanking: 2, eveningPeakStation: "Station B", eveningPeakInboundVolume: 80, eveningPeakCorrespondingPeriodLastYear: "+5%", eveningPeakProportionWholeDay: "40%", }, // more data... ]; function MyComponent() { const tableRows = data.map((row) => ( <tr> <td>{row.morningPeakRanking}</td> <td>{row.morningPeakStation}</td> <td>{row.morningPeakInboundVolume}</td> <td>{row.morningPeakCorrespondingPeriodLastYear}</td> <td>{row.morningPeakProportionWholeDay}</td> <td>{row.eveningPeakRanking}</td> <td>{row.eveningPeakStation}</td> <td>{row.eveningPeakInboundVolume}</td> <td>{row.eveningPeakCorrespondingPeriodLastYear}</td> <td>{row.eveningPeakProportionWholeDay}</td> </tr> )); const table = ( <table> <thead> <tr> <th colSpan={5}>早高峰</th> <th colSpan={5}>晚高峰</th> </tr> <tr> <th>排名</th> <th>车站</th> <th>进站量/人</th> <th>上年同比</th> <th>全天占比</th> <th>排名</th> <th>车站</th> <th>进站量/人</th> <th>上年同比</th> <th>全天占比</th> </tr> </thead> <tbody>{tableRows}</tbody> </table> ); const wordContent = ( <> <div className="table-weekday">{table}</div> </> ); const handleDownloadWord = async () => { const file = await mhtmlToWord(wordContent); saveAs(file, "myTable.docx"); }; return ( <div> {table} <button onClick={handleDownloadWord}>Download Word</button> </div> ); } ``` 在上面的代码中，我们首先将原始的数据数组转换为表格行数组。然后，我们使用JSX创建一个包含表格的React元素，并将其传递给mhtml-to-word的`mhtmlToWord`函数。最后，我们将生成的Word文档保存到本地文件系统中。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值