最近接手了一个商城优化的 react 项目,从 https://blog.csdn.net/zeping891103/article/details/84846221 中得知了 react-router 原来还有个 hashType 的配置, slash 对应#/ noslash 对应# hashbang 对应这次出问题的商城里所使用的#!
现在的问题看起来是“登录操作会刷新一次页面从而使 http://localhost:3000/#!/login 替换成了 http://localhost:3000/?#!/login 导致必须登录两次”
关键字也不知道半天也没查出什么名堂,想问一下这个 hash 标识前的?是何物
,或者出于什么错误产生的。
项目里使用的是 mirrorx,封装了 react-routerv4, 错误的重定向产生了这个问题?不规范的 axios.interceptors 拦截器产生了这个问题?antd 中 form 的 api 方法错误使用导致了这个问题? 排查的方向有点大,想问问 V 友有没有遇到过同样问题的前人
1
ss098 2020-05-05 15:36:36 +08:00 1
是不是你们的 form 标签登录时被触发提交。
|
2
devwolf OP @ss098 一语中的啊,旧代码里用的是
<Form onSubmit={this.handleSubmit}></Form> 结合 <Button type="primary" htmlType="submit" className="login-form-button"> 登录 </Button> 我借着提示,替换成了 onClick 提交就没有出现这个问号了(旧代码也没用上封装给 onSubmit 的参数 e), 原来这方面出错会导致这样的问题啊,我再查查 |
3
lihongming 2020-05-06 01:58:56 +08:00 via iPhone 2
用 onSubmit 不是问题,用户就不必点按钮提交,还可以按回车提交。
问题是你的 handler 里面应该有一句 e.preventDefault()来阻止默认动作(提交表单) |
4
devwolf OP 感谢#3 的老哥提供进一步讲解。
这类问题关键字应该是"submit 事件"了。 今天顺着 3 楼思路,又在 Form 组件的 onSubmit 的绑定方法里添上了 e.preventDefault()同样成功解决了问题。 对于阻止默认动作的位置(我怎么就没有这种好奇心),还在 https://www.cnblogs.com/frogblog/p/9172161.html 这篇博客里得到另一个尝试"如果没有阻止点击事件浏览器默认行为会紧接着触发 form 表单提交事件; --如果阻止点击事件浏览器默认行为,不管是回车提交还是点击按钮提交都不会再触发 form 表单提交事件" |