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

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

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

一、问题出现

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

登录跳转代码（代码一）：

<div className="container">
            <form className="form-signin">
              <h2 className="form-signin-heading">Please sign in</h2>
              <label htmlFor="inputEmail" className="sr-only">Email address</label>
              <input type="text" id="inputEmail" className="form-control" placeholder="Email address" required autofocus/>
              <label htmlFor="inputPassword" className="sr-only">Password</label>
              <input type="password" id="inputPassword" className="form-control" placeholder="Password" required/>
              <div className="checkbox">
                <label><input type="checkbox" value="remember-me"/> Remember me</label>
              </div>
              <button className="btn btn-lg btn-primary btn-block" type="submit" onClick={() => login('Lings','123456')}>Sign in</button>
            </form>
          </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~问题解决！老老实实的跳转了，不再跳回登录页面了。

 

五、新的问题

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

<div className="container">
            <form className="form-signin">
              <h2 className="form-signin-heading">Please sign in</h2>
              <label htmlFor="inputEmail" className="sr-only">Email address</label>
              <input type="email" id="inputEmail" className="form-control" placeholder="Email address" required autofocus/>
              <label htmlFor="inputPassword" className="sr-only">Password</label>
              <input type="password" id="inputPassword" className="form-control" placeholder="Password" required/>
              <div className="checkbox">
                <label><input type="checkbox" value="remember-me"/> Remember me</label>
              </div>
              <button className="btn btn-lg btn-primary btn-block" type="submit" onClick={() => login('Lings','123456')}>Sign in</button>
            </form>
          </div>

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

六、个人的一个看法

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

那就对比代码吧，看到不一样的了！！！

七、一个差别
A. 代码一

5：<input type="text" 

B. 代码二

5：<input type="email"

八、更新的问题

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

九、问题找到

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

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

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

十、一个感想

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

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