前言

中后臺(tái)業(yè)務(wù)場(chǎng)景中，表單是一種很常見(jiàn)的與用戶交互的方式，從業(yè)務(wù)角度看，表單主要是收集用戶的信息，而從技術(shù)角度看，作為一個(gè)通用型的組件，它要解決的問(wèn)題無(wú)非就是三個(gè)：

• 把一個(gè)初始數(shù)據(jù)對(duì)象扔給它，它能夠讓 Form 內(nèi)的交互型組件獲取到數(shù)據(jù)并展示出來(lái)，同時(shí)這些組件上的數(shù)據(jù)也能反過(guò)來(lái)讓 Form 組件獲取到
• 支持表單數(shù)據(jù)的各種規(guī)則校驗(yàn)，自定義提示信息的展示，自定義組件等
• 怎么讓寫表單變得簡(jiǎn)單

功能

• 類似雙向數(shù)據(jù)綁定的數(shù)據(jù)管理
• 數(shù)據(jù)進(jìn)行校驗(yàn)
• 自定義組件和布局

類似雙向數(shù)據(jù)綁定的數(shù)據(jù)管理

FormBinder 的設(shè)計(jì)非常簡(jiǎn)單，將表單數(shù)據(jù)的管理和視圖分離開(kāi)來(lái)，表單的狀態(tài)維護(hù)在組件內(nèi)部，通過(guò) values 初始化表單的數(shù)據(jù)，當(dāng)表單域發(fā)生改變時(shí)會(huì)通過(guò) onChange 動(dòng)態(tài)更新 values，從而達(dá)到類似雙向數(shù)據(jù)綁定的效果。也有點(diǎn)類似于最近的 react hooks，將 state 進(jìn)行單獨(dú)維護(hù)，實(shí)現(xiàn) UI 和 Logic 的分離。

FormBinderWrapper 作為整個(gè)表單的容器，接收 value 和 onChange 等屬性，其中 value 會(huì)作為整個(gè)表單數(shù)據(jù)的根節(jié)點(diǎn)，交由下層組件去獲取、更新等操作：

import React, { Component } from 'react'; import { FormBinderWrapper, FormBinder } from '@icedesign/form-binder'; import { Input } from '@icedesign/base';class Login extends Component {// 設(shè)置表單初始數(shù)據(jù)state = {value: {username: '',password: '',checkbox: false}};// 表單的輸入改變這里會(huì)動(dòng)態(tài)響應(yīng)formChange = value => {console.log(value);};render() {return (<FormBinderWrappervalue={this.state.value} // 傳遞 valuesonChange={this.formChange} // 響應(yīng) onChange><FormBinder name="username" required message="請(qǐng)輸入正確的名稱" ><Input /> </FormBinder></FormBinderWrapper>);} }

經(jīng)過(guò) FormBinderWrapper 包裝的組件，數(shù)據(jù)傳遞和同步將被接管，這意味著：

你不需要使用表單元素的 onChange 來(lái)做同步，但還是可以繼續(xù)監(jiān)聽(tīng) onChange 等事件。

你不需要使用表單元素的 value、 defaultValue 等屬性來(lái)設(shè)置表單元素的值，只需通過(guò)初始的 value 進(jìn)行設(shè)置。

你不需要通過(guò) setState 來(lái)動(dòng)態(tài)更新表單的值，因?yàn)楸韱文J(rèn)支持雙向數(shù)據(jù)通信，但可以通過(guò) setFieldValue 和 getFieldValue 來(lái)設(shè)置或者更新表單域的值。

示例：

數(shù)據(jù)進(jìn)行校驗(yàn)

FormBinder 在數(shù)據(jù)校驗(yàn)上基于 async-validator 實(shí)現(xiàn)，提供了常見(jiàn)的校驗(yàn)規(guī)則，只需在相應(yīng)的組件上添加校驗(yàn)規(guī)則即可，如果某些場(chǎng)景校驗(yàn)太復(fù)雜，也可以通過(guò) validator 自定義校驗(yàn)規(guī)則實(shí)現(xiàn)。FormBinder 提供了 FormError 組件，可以根據(jù)需求自定義數(shù)據(jù)校驗(yàn)和表示提示信息展示。

import { FormBinderWrapper, FormBinder, FormError } from '@icedesign/form-binder';...<FormBinderWrappervalue={this.state.value}onChange={this.formChange}><FormBinder name="username" required message="請(qǐng)輸入正確的名稱" ><Input /> </FormBinder>// 自定義錯(cuò)誤信息提示，FormBinder 和 FormError 需要保證 name <FormError name="username" /></FormBinderWrapper>...

示例：

自定義組件和布局

FormBinder 核心是提供了數(shù)據(jù)的綁定(binding)， 因此使用 FormBinder 你可以任意的選擇組件庫(kù)，也可以自定義組件 自由組合表單的布局，展示表單提示等，其核心是對(duì)表單數(shù)據(jù)的抽象。當(dāng)表單數(shù)據(jù)沒(méi)有通過(guò)校驗(yàn)或者需要分步驟提示等場(chǎng)景時(shí)，非常的方便。

最后

FormBinder 的設(shè)計(jì)非常簡(jiǎn)單，解決的問(wèn)題也非常簡(jiǎn)單，它只做了數(shù)據(jù)的雙向狀態(tài)管理收集和支持?jǐn)?shù)據(jù)校驗(yàn)，這也是我們將它命名為 FormBinder 的原因。

詳細(xì)文檔請(qǐng)參考： FormBinder 組件

擴(kuò)展信息

淘寶開(kāi)發(fā)者平臺(tái)?developer.taobao.com

• 官方網(wǎng)站：飛冰-讓前端開(kāi)發(fā)簡(jiǎn)單而友好
• 下載 Iceworks：https://alibaba.github.io/ice/iceworks
• Github：http://github.com/alibaba/ice
• 聯(lián)系 & 招聘 ice-admin[at]alibaba-inc.com

總結(jié)

以上是生活随笔為你收集整理的form表单通过checkbox_飞冰表单解决方案 - FormBinder的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。