React Form組件的實現(xiàn)封裝雜談
前言
對于網(wǎng)頁系統(tǒng)來說，表單提交是一種很常見的與用戶交互的方式，比如提交訂單的時候，需要輸入收件人、手機號、地址等信息，又或者對系統(tǒng)進行設置的時候，需要填寫一些個人偏好的信息。 表單提交是一種結(jié)構(gòu)化的操作，可以通過封裝一些通用的功能達到簡化開發(fā)的目的。本文將討論Form表單組件設計的思路，并結(jié)合有贊的ZentForm組件介紹具體的實現(xiàn)方式。本文所涉及的代碼都是基于React v15的版本。
Form組件功能
一般來說，F(xiàn)orm組件的功能包括以下幾點：
- 表單布局
- 表單字段
- 封裝表單驗證&錯誤提示
- 表單提交
下面將對每個部分的實現(xiàn)方式做詳細介紹。
表單布局
常用的表單布局一般有3種方式：
行內(nèi)布局
水平布局
垂直布局
實現(xiàn)方式比較簡單，嵌套css就行。比如form的結(jié)構(gòu)是這樣：
<form class="form"> <label class="label"/> <field class="field"/> </form>
對應3種布局，只需要在form標簽增加對應的class：
<!--行內(nèi)布局--> <form class="form inline"> <label class="label"/> <field class="field"/> </form> <!--水平布局--> <form class="form horizontal"> <label class="label"/> <field class="field"/> </form> <!--垂直布局--> <form class="form vertical"> <label class="label"/> <field class="field"/> </form>
相應的，要定義3種布局的css：
.inline .label {
display: inline-block;
...
}
.inline .field {
display: inline-block;
...
}
.horizontal .label {
display: inline-block;
...
}
.horizontal .field {
display: inline-block;
...
}
.vertical .label {
display: block;
...
}
.vertical .field {
display: block;
...
}
表單字段封裝
字段封裝部分一般是對組件庫的組件針對Form再做一層封裝，如Input組件、Select組件、Checkbox組件等。當現(xiàn)有的字段不能滿足需求時，可以自定義字段。
表單的字段一般包括兩部分，一部分是標題，另一部分是內(nèi)容。ZentForm通過getControlGroup這一高階函數(shù)對結(jié)構(gòu)和樣式做了一些封裝，它的入?yún)⑹且@示的組件：
export default Control => {
render() {
return (
<div className={groupClassName}>
<label className="zent-form__control-label">
{required ? <em className="zent-form__required">*</em> : null}
{label}
</label>
<div className="zent-form__controls">
<Control {...props} {...controlRef} />
{showError && (
<p className="zent-form__error-desc">{props.error}</p>
)}
{notice && <p className="zent-form__notice-desc">{notice}</p>}
{helpDesc && <p className="zent-form__help-desc">{helpDesc}</p>}
</div>
</div>
);
}
}
這里用到的label和error等信息，是通過Field組件傳入的：
<Field
label="預約門店："
name="dept"
component={CustomizedComp}
validations={{
required: true,
}}
validationErrors={{
required: '預約門店不能為空',
}}
required
/>
這里的CustomizedComp是通過getControlGroup封裝后返回的組件。
字段與表單之間的交互是一個需要考慮的問題，表單需要知道它包含的字段值，需要在適當?shù)臅r機對字段進行校驗。ZentForm的實現(xiàn)方式是在Form的高階組件內(nèi)維護一個字段數(shù)組，數(shù)組內(nèi)容是Field的實例。后續(xù)通過操作這些實例的方法來達到取值和校驗的目的。
ZentForm的使用方式如下：
class FieldForm extends React.Component {
render() {
return (
<Form>
<Field
name="name"
component={CustomizedComp}
</Form>
)
}
}
export default createForm()(FieldForm);
其中Form和Field是組件庫提供的組件，CustomizedComp是自定義的組件，createForm是組件庫提供的高階函數(shù)。在createForm返回的組件中，維護了一個fields的數(shù)組，同時提供了attachToForm和detachFromForm兩個方法，來操作這個數(shù)組。這兩個方法保存在context對象當中，F(xiàn)ield就能在加載和卸載的時候調(diào)用了。簡化后的代碼如下：
/**
* createForm高階函數(shù)
*/
const createForm = (config = {}) => {
...
return WrappedForm => {
return class Form extends Component {
constructor(props) {
super(props);
this.fields = [];
}
getChildContext() {
return {
zentForm: {
attachToForm: this.attachToForm,
detachFromForm: this.detachFromForm,
}
}
}
attachToForm = field => {
if (this.fields.indexOf(field) < 0) {
this.fields.push(field);
}
};
detachFromForm = field => {
const fieldPos = this.fields.indexOf(field);
if (fieldPos >= 0) {
this.fields.splice(fieldPos, 1);
}
};
render() {
return createElement(WrappedForm, {...});
}
}
}
}
/**
* Field組件
*/
class Field extends Component {
componentWillMount() {
this.context.zentForm.attachToForm(this);
}
componentWillUnmount() {
this.context.zentForm.detachFromForm(this);
}
render() {
const { component } = this.props;
return createElement(component, {...});
}
}
當需要獲取表單字段值的時候，只需要遍歷fields數(shù)組，再調(diào)用Field實例的相應方法就可以：
/**
* createForm高階函數(shù)
*/
const createForm = (config = {}) => {
...
return WrappedForm => {
return class Form extends Component {
getFormValues = () => {
return this.fields.reduce((values, field) => {
const name = field.getName();
const fieldValue = field.getValue();
values[name] = fieldValue;
return values;
}, {});
};
}
}
}
/**
* Field組件
*/
class Field extends Component {
getValue = () => {
return this.state._value;
};
}
表單驗證&錯誤提示
表單驗證是一個重頭戲，只有驗證通過了才能提交表單。驗證的時機也有多種，如字段變更時、鼠標移出時和表單提交時。ZentForm提供了一些常用的驗證規(guī)則，如非空驗證，長度驗證，郵箱地址驗證等。當然還能自定義一些更復雜的驗證方式。自定義驗證方法可以通過兩種方式傳入ZentForm，一種是通過給createForm傳參：
createForm({
formValidations: {
rule1(values, value){
},
rule2(values, value){
},
}
})(FormComp);
另一種方式是給Field組件傳屬性：
<Field
validations={{
rule1(values, value){
},
rule2(values, value){
},
}}
validationErrors={{
rule1: 'error1',
rule2: 'error2'
}}
/>
使用createForm傳參的方式，驗證規(guī)則是共享的，而Field的屬性傳參是字段專用的。validationErrors指定校驗失敗后的提示信息。這里的錯誤信息會顯示在前面getControlGroup所定義HTML中{showError && (<p className="zent-form__error-desc">{props.error}</p>)}
ZentForm的核心驗證邏輯是createForm的runRules方法，
runRules = (value, currentValues, validations = {}) => {
const results = {
errors: [],
failed: [],
};
function updateResults(validation, validationMethod) {
// validation方法可以直接返回錯誤信息，否則需要返回布爾值表明校驗是否成功
if (typeof validation === 'string') {
results.errors.push(validation);
results.failed.push(validationMethod);
} else if (!validation) {
results.failed.push(validationMethod);
}
}
Object.keys(validations).forEach(validationMethod => {
...
// 使用自定義校驗方法或內(nèi)置校驗方法（可以按需添加）
if (typeof validations[validationMethod] === 'function') {
const validation = validations[validationMethod](
currentValues,
value
);
updateResults(validation, validationMethod);
} else {
const validation = validationRules[validationMethod](
currentValues,
value,
validations[validationMethod]
);
}
});
return results;
};
默認的校驗時機是字段值改變的時候，可以通過Field的validateOnChange和validateOnBlur來改變校驗時機。
<Field
validateOnChange={false}
validateOnBlur={false}
validations={{
required: true,
matchRegex: /^[a-zA-Z]+$/
}}
validationErrors={{
required: '值不能為空',
matchRegex: '只能為字母'
}}
/>
對應的，在Field組件中有2個方法來處理change和blur事件：
class Field extends Component {
handleChange = (event, options = { merge: false }) => {
...
this.setValue(newValue, validateOnChange);
...
}
handleBlur = (event, options = { merge: false }) => {
...
this.setValue(newValue, validateOnBlur);
...
}
setValue = (value, needValidate = true) => {
this.setState(
{
_value: value,
_isDirty: true,
},
() => {
needValidate && this.context.zentForm.validate(this);
}
);
};
}
當觸發(fā)驗證的時候，ZentForm是會對表單對所有字段進行驗證，可以通過指定relatedFields來告訴表單哪些字段需要同步進行驗證。
表單提交
表單提交時，一般會經(jīng)歷如下幾個步驟
- 表單驗證
- 表單提交
- 提交成功處理
- 提交失敗處理
ZentForm通過handleSubmit高階函數(shù)定義了上述幾個步驟，只需要傳入表單提交的邏輯即可：
const handleSubmit = (submit, zentForm) => {
const doSubmit = () => {
...
result = submit(values, zentForm);
...
return result.then(
submitResult => {
...
if (onSubmitSuccess) {
handleOnSubmitSuccess(submitResult);
}
return submitResult;
},
submitError => {
...
const error = handleSubmitError(submitError);
if (error || onSubmitFail) {
return error;
}
throw submitError;
}
);
}
const afterValidation = () => {
if (!zentForm.isValid()) {
...
if (onSubmitFail) {
handleOnSubmitError(new SubmissionError(validationErrors));
}
} else {
return doSubmit();
}
};
const allIsValidated = zentForm.fields.every(field => {
return field.props.validateOnChange || field.props.validateOnBlur;
});
if (allIsValidated) {
// 不存在沒有進行過同步校驗的field
afterValidation();
} else {
zentForm.validateForm(true, afterValidation);
}
}
使用方式如下：
const { handleSubmit } = this.props;
<Form onSubmit={handleSubmit(this.submit)} horizontal>
ZentForm不足之處
ZentForm雖然功能強大，但仍有一些待改進之處：
- 父組件維護了所有字段的實例，直接調(diào)用實例的方法來取值或者驗證。這種方式雖然簡便，但有違React聲明式編程和函數(shù)式編程的設計思想，并且容易產(chǎn)生副作用，在不經(jīng)意間改變了字段的內(nèi)部屬性。
- 大部分的組件重使用了shouldComponentUpdate，并對state和props進行了深比較，對性能有比較大的影響，可以考慮使用PureComponent。
- 太多的情況下對整個表單字段進行了校驗，比較合理的情況應該是某個字段修改的時候只校驗本身，在表單提交時再校驗所有的字段。
- 表單提交操作略顯繁瑣，還需要調(diào)用一次handleSubmit，不夠優(yōu)雅。
結(jié)語
本文討論了Form表單組件設計的思路，并結(jié)合有贊的ZentForm組件介紹具體的實現(xiàn)方式。ZentForm的功能十分強大，本文只是介紹了其核心功能，另外還有表單的異步校驗、表單的格式化和表單的動態(tài)添加刪除字段等高級功能都還沒涉及到，感興趣的朋友可點擊前面的鏈接自行研究。
希望閱讀完本文后，你對React的Form組件實現(xiàn)有更多的了解，也歡迎留言討論。
相關文章
這篇文章主要為大家介紹了React路由攔截模式及withRouter示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-08-08
這篇文章主要介紹了Ant?Design?組件庫按鈕實現(xiàn)示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪</P><P><BR>2022-08-08
這篇文章主要給大家介紹了關于React中this丟失的四種解決方法，文中通過示例代碼介紹的非常詳細，對大家的學習或者使用React具有一定的參考學習價值，需要的朋友們下面來一起學習學習吧2019-03-03
淺談React Native 傳參的幾種方式(小結(jié))
這篇文章主要介紹了淺談React Native 傳參的幾種方式，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2019-05-05
這篇文章主要介紹了vue3中獲取ref元素的幾種方式總結(jié)，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-12-12
詳解使用webpack+electron+reactJs開發(fā)windows桌面應用
這篇文章主要介紹了詳解使用webpack+electron+reactJs開發(fā)windows桌面應用，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2019-02-02
React是用于構(gòu)建用戶界面的JavaScript庫，?[1]??起源于Facebook的內(nèi)部項目，該公司對市場上所有?JavaScript?MVC框架都不滿意，決定自行開發(fā)一套，用于架設Instagram的網(wǎng)站2022-07-07
這篇文章主要介紹了antd?upload上傳如何獲取文件寬高問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-02-02
這篇文章主要給大家介紹了關于react如何實現(xiàn)一個密碼強度檢測器的相關資料,使用這個密碼強度器后可以幫助大家提高在線帳號、個人信息的安全性,需要的朋友可以參考下2021-06-06
react 項目 中使用 Dllplugin 打包優(yōu)化技巧
在用 Webpack 打包的時候，對于一些不經(jīng)常更新的第三方庫，比如 react，lodash，vue 我們希望能和自己的代碼分離開，這篇文章主要介紹了react 項目 中 使用 Dllplugin 打包優(yōu)化,需要的朋友可以參考下2023-01-01