使用React實作一個簡單的Sign In Form

前不久看到了一個感覺不錯的 input label 的呈現方式(已忘了在哪看到了)，今天想說用 React 實作同樣的 label 呈現方式，並把它放在一個簡單的 Sign In Form 中，以下是最後的結果：

其中 Form 的認證使用了簡單的 AJAX 來取得結果，因為自己目前是使用Rails來當後端，當中的 CSRF token 則是 Rails的Security 處理的一環，這邊改變 label 的 class 的事件，則是加在相對的 input 的 focus 與 blur 事件上。

其中處理input的focus與blur事件分別是判斷輸入值是否是空的，是的話就在label 的 class name 加上 ”active”，不是的話就把 ”active” 從 label 的 class name 移除，相關的程式如下：

input.onfocus = function() {
  if (label.className.indexOf(‘active’) == -1) {
    label.className += “ active”;
  }
};

input.onblur = function() {
   if (input.value.length == 0 || !input.value.trim()) {
     label.className = label.className.replace(/(?:^|\s)active(?!\S)/, ‘’);
   }
}

label.onclick = function() {
  input.focus();
}

而在對於 label 的 CSS 處理上，則是根據 label 的 class name 是否有 ”active” 來移動其位置，相關設定如下：

label{
  ...
  top: 30px;
 
  @include transition(..., top .3s);
 
  &.active{
    top: 0px;
    ...
  }
}

簡單，卻有著還不錯的效果。