标签：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
