前言

中後台業務場景中，表單是一種很常見的與用戶交互的方式，從業務角度看，表單主要是收集用戶的信息，而從技術角度看，作為一個通用型的組件，它要解決的問題無非就是三個：

  • 把一個初始數據對象扔給它，它能夠讓 Form 內的交互型組件獲取到數據並展示出來，同時這些組件上的數據也能反過來讓 Form 組件獲取到
  • 支持表單數據的各種規則校驗，自定義提示信息的展示，自定義組件等
  • 怎麼讓寫表單變得簡單

功能

  • 類似雙向數據綁定的數據管理
  • 數據進行校驗
  • 自定義組件和布局

類似雙向數據綁定的數據管理

FormBinder 的設計非常簡單，將表單數據的管理和視圖分離開來，表單的狀態維護在組件內部，通過 values 初始化表單的數據，當表單域發生改變時會通過 onChange 動態更新 values，從而達到類似雙向數據綁定的效果。也有點類似於最近的 react hooks，將 state 進行單獨維護，實現 UI 和 Logic 的分離。

FormBinderWrapper 作為整個表單的容器，接收 value 和 onChange 等屬性，其中 value 會作為整個表單數據的根節點，交由下層組件去獲取、更新等操作：

import React, { Component } from react;
import { FormBinderWrapper, FormBinder } from @icedesign/form-binder;
import { Input } from @icedesign/base;

class Login extends Component {

// 設置表單初始數據
state = {
value: {
username: ,
password: ,
checkbox: false
}
};

// 表單的輸入改變這裡會動態響應
formChange = value => {
console.log(value);
};

render() {
return (
<FormBinderWrapper
value={this.state.value} // 傳遞 values
onChange={this.formChange} // 響應 onChange
>
<FormBinder name="username" required message="請輸入正確的名稱" >
<Input />
</FormBinder>
</FormBinderWrapper>
);
}
}

經過 FormBinderWrapper 包裝的組件，數據傳遞和同步將被接管，這意味著：

  1. 你不需要使用表單元素的 onChange 來做同步，但還是可以繼續監聽 onChange 等事件。
  2. 你不需要使用表單元素的 value、 defaultValue 等屬性來設置表單元素的值，只需通過初始的 value 進行設置。
  3. 你不需要通過 setState 來動態更新表單的值，因為表單默認支持雙向數據通信，但可以通過 setFieldValue 和 getFieldValue 來設置或者更新表單域的值。

示例：

數據進行校驗

FormBinder 在數據校驗上基於 async-validator 實現，提供了常見的校驗規則，只需在相應的組件上添加校驗規則即可，如果某些場景校驗太複雜，也可以通過 validator 自定義校驗規則實現。FormBinder 提供了 FormError 組件，可以根據需求自定義數據校驗和表示提示信息展示。

import { FormBinderWrapper, FormBinder, FormError } from @icedesign/form-binder;

...

<FormBinderWrapper
value={this.state.value}
onChange={this.formChange}
>

<FormBinder name="username" required message="請輸入正確的名稱" >
<Input />
</FormBinder>

// 自定義錯誤信息提示，FormBinder 和 FormError 需要保證 name
<FormError name="username" />
</FormBinderWrapper>

...

示例：

自定義組件和布局

FormBinder 核心是提供了數據的綁定(binding)， 因此使用 FormBinder 你可以任意的選擇組件庫，也可以自定義組件 自由組合表單的布局，展示表單提示等，其核心是對錶單數據的抽象。當表單數據沒有通過校驗或者需要分步驟提示等場景時，非常的方便。

最後

FormBinder 的設計非常簡單，解決的問題也非常簡單，它只做了數據的雙向狀態管理收集和支持數據校驗，這也是我們將它命名為 FormBinder 的原因。

詳細文檔請參考： FormBinder 組件

擴展信息

淘寶開發者平台?

developer.taobao.com

  • 官方網站：飛冰-讓前端開發簡單而友好
  • 下載 Iceworks：alibaba.github.io/ice/i
  • Github：github.com/alibaba/ice
  • 飛冰群二維碼：點擊這裡查看二維碼
  • 聯繫 & 招聘 ice-admin[at]alibaba-inc.com

推薦閱讀：

查看原文 >>
相关文章