码迷,mamicode.com
首页 > 其他好文 > 详细

记一次“拷贝”的前端代码出错

时间:2017-08-03 22:11:36      阅读:179      评论:0      收藏:0      [点我收藏+]

标签:mem   require   类型   html   block   计算机世界   put   配置   结果   

遇到了一个差点让我用玄学去解释的问题,最后终于还是找到原因了。更加坚定了一个信念

计算机世界里没有毫无原因的错误,所有的问题都能找到对应的解释。

一、问题出现

登录页面,点击登录按钮,页面刷新,但是又回到了登录页面。

登录跳转代码(代码一):

 1 <div className="container">
 2             <form className="form-signin">
 3               <h2 className="form-signin-heading">Please sign in</h2>
 4               <label htmlFor="inputEmail" className="sr-only">Email address</label>
 5               <input type="text" id="inputEmail" className="form-control" placeholder="Email address" required autofocus/>
 6               <label htmlFor="inputPassword" className="sr-only">Password</label>
 7               <input type="password" id="inputPassword" className="form-control" placeholder="Password" required/>
 8               <div className="checkbox">
 9                 <label><input type="checkbox" value="remember-me"/> Remember me</label>
10               </div>
11               <button className="btn btn-lg btn-primary btn-block" type="submit" onClick={() => login(Lings,123456)}>Sign in</button>
12             </form>
13           </div>

二、问题排查

跟踪日志,发现确实执行了跳转动作,但是结束后又访问了"/"路径,我配置的是登录页面,所以又回到了登录页面。

可能前端的高手一眼就能发现问题:

button的type设置为了submit,隐含着一个默认的提交动作。

三、修改测试

将button的type修改为button

<button className="btn btn-lg btn-primary btn-block" type="button" onClick={() => login(Lings,123456)}>Sign in</button>

四、问题解决

Duang~问题解决!老老实实的跳转了,不再跳回登录页面了。

 

五、新的问题

我反而陷入了更大的疑惑,因为这个代码是我从一个运行的好好的项目”拷贝“过来的,那个项目怎么没有这个问题?
再看看另外一个项目的代码:

 1 <div className="container">
 2             <form className="form-signin">
 3               <h2 className="form-signin-heading">Please sign in</h2>
 4               <label htmlFor="inputEmail" className="sr-only">Email address</label>
 5               <input type="email" id="inputEmail" className="form-control" placeholder="Email address" required autofocus/>
 6               <label htmlFor="inputPassword" className="sr-only">Password</label>
 7               <input type="password" id="inputPassword" className="form-control" placeholder="Password" required/>
 8               <div className="checkbox">
 9                 <label><input type="checkbox" value="remember-me"/> Remember me</label>
10               </div>
11               <button className="btn btn-lg btn-primary btn-block" type="submit" onClick={() => login(Lings,123456)}>Sign in</button>
12             </form>
13           </div>

这个button的type也设置为了submit,为啥这个就不报错?

六、个人的一个看法

正常情况下,完全一样的代码和输入,每次得到完全不同的结果是不可能的。偶尔有一次偏差倒是可以理解。

那就对比代码吧,看到不一样的了!!!

七、一个差别
A. 代码一

5:<input type="text" 

B. 代码二

5:<input type="email"

八、更新的问题

这个类型不一样为啥会导致submit不生效?

九、问题找到

在测试登录的时候,我在这个input输入的"admin"。

在代码一中,符合text的文本类型的校验。
在代码二中,不符合email的正则,校验出错。

所以代码二中的submit动作就没有触发!

十、一个感想

强大的封装库让代码”敲打“更轻松了。但是问题排查呢?至少在不是非常了解一个组件的时候,可能会带来更多的想不到吧。

凡事皆是如此,一看”取舍“,二看”格“。

记一次“拷贝”的前端代码出错

标签:mem   require   类型   html   block   计算机世界   put   配置   结果   

原文地址:http://www.cnblogs.com/yoyotl/p/7281693.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!