首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript

React Form组件的实现封装杂谈

Posted in Javascript onMay 07, 2018

前言

对于网页系统来说，表单提交是一种很常见的与用户交互的方式，比如提交订单的时候，需要输入收件人、手机号、地址等信息，又或者对系统进行设置的时候，需要填写一些个人偏好的信息。 表单提交是一种结构化的操作，可以通过封装一些通用的功能达到简化开发的目的。本文将讨论Form表单组件设计的思路，并结合有赞的ZentForm组件介绍具体的实现方式。本文所涉及的代码都是基于React v15的版本。

Form组件功能

一般来说，Form组件的功能包括以下几点：

  1. 表单布局
  2. 表单字段
  3. 封装表单验证&错误提示
  4. 表单提交

下面将对每个部分的实现方式做详细介绍。

表单布局

常用的表单布局一般有3种方式：

行内布局

React Form组件的实现封装杂谈

水平布局

React Form组件的实现封装杂谈

垂直布局

React Form组件的实现封装杂谈

实现方式比较简单，嵌套css就行。比如form的结构是这样：

<form class="form">
  <label class="label"/>
  <field class="field"/>
</form>

对应3种布局，只需要在form标签增加对应的class：

<!--行内布局-->
<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组件等。当现有的字段不能满足需求时，可以自定义字段。

表单的字段一般包括两部分，一部分是标题，另一部分是内容。ZentForm通过getControlGroup这一高阶函数对结构和样式做了一些封装，它的入参是要显示的组件：

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封装后返回的组件。

字段与表单之间的交互是一个需要考虑的问题，表单需要知道它包含的字段值，需要在适当的时机对字段进行校验。ZentForm的实现方式是在Form的高阶组件内维护一个字段数组，数组内容是Field的实例。后续通过操作这些实例的方法来达到取值和校验的目的。

ZentForm的使用方式如下：

class FieldForm extends React.Component {
  render() {
    return (
      <Form>
        <Field
          name="name"
          component={CustomizedComp}
      </Form>
    )
  }
}

export default createForm()(FieldForm);

其中Form和Field是组件库提供的组件，CustomizedComp是自定义的组件，createForm是组件库提供的高阶函数。在createForm返回的组件中，维护了一个fields的数组，同时提供了attachToForm和detachFromForm两个方法，来操作这个数组。这两个方法保存在context对象当中，Field就能在加载和卸载的时候调用了。简化后的代码如下：

/**
 * createForm高阶函数
 */
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数组，再调用Field实例的相应方法就可以：

/**
 * createForm高阶函数
 */
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提供了一些常用的验证规则，如非空验证，长度验证，邮箱地址验证等。当然还能自定义一些更复杂的验证方式。自定义验证方法可以通过两种方式传入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传参的方式，验证规则是共享的，而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 => {
    ...
    // 使用自定义校验方法或内置校验方法（可以按需添加）
    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);
      }
    );
 };
}

当触发验证的时候，ZentForm是会对表单对所有字段进行验证，可以通过指定relatedFields来告诉表单哪些字段需要同步进行验证。

表单提交

表单提交时，一般会经历如下几个步骤

  1. 表单验证
  2. 表单提交
  3. 提交成功处理
  4. 提交失败处理

ZentForm通过handleSubmit高阶函数定义了上述几个步骤，只需要传入表单提交的逻辑即可：

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虽然功能强大，但仍有一些待改进之处：

  1. 父组件维护了所有字段的实例，直接调用实例的方法来取值或者验证。这种方式虽然简便，但有违React声明式编程和函数式编程的设计思想，并且容易产生副作用，在不经意间改变了字段的内部属性。
  2. 大部分的组件重使用了shouldComponentUpdate，并对state和props进行了深比较，对性能有比较大的影响，可以考虑使用PureComponent。
  3. 太多的情况下对整个表单字段进行了校验，比较合理的情况应该是某个字段修改的时候只校验本身，在表单提交时再校验所有的字段。
  4. 表单提交操作略显繁琐，还需要调用一次handleSubmit，不够优雅。

结语

本文讨论了Form表单组件设计的思路，并结合有赞的ZentForm组件介绍具体的实现方式。ZentForm的功能十分强大，本文只是介绍了其核心功能，另外还有表单的异步校验、表单的格式化和表单的动态添加删除字段等高级功能都还没涉及到，感兴趣的朋友可点击前面的链接自行研究。

希望阅读完本文后，你对React的Form组件实现有更多的了解，也欢迎留言讨论。

React Form组件的实现封装杂谈

- Author -

dabai

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐
jquery JSON的解析方式
Jul 25 Javascript
ASP小贴士/ASP Tips javascript tips可以当桌面
Dec 10 Javascript
Jquery中扩展方法extend使用技巧
Aug 24 Javascript
angularjs中的单元测试实例
Dec 06 Javascript
JS实现鼠标滑过折叠与展开菜单效果代码
Sep 06 Javascript
浅析BootStrap模态框的使用(经典)
Apr 29 Javascript
JS简单实现仿百度控制台输出信息效果
Sep 04 Javascript
javascript checkbox/radio onchange不能兼容ie8处理办法
Jun 13 Javascript
AngularJs实现聊天列表实时刷新功能
Jun 15 Javascript
通过vue写一个瀑布流插件代码实例
Sep 07 Javascript
VUE 组件转换为微信小程序组件的方法
Nov 06 Javascript
js实现弹窗猜数字游戏
Nov 26 Javascript
vue如何将v-for中的表格导出来
May 07 #Javascript
浅谈Vue 数据响应式原理
May 07 #Javascript
浅谈Vue响应式(数组变异方法)
May 07 #Javascript
在HTML文档中嵌入JavaScript的四种方法
May 07 #Javascript
详解JavaScript的BUG和错误
May 07 #Javascript
vue实现个人信息查看和密码修改功能
May 06 #Javascript
基于vue-element组件实现音乐播放器功能
May 06 #Javascript
SSH(3) 人人对战(1) 数据表(1) 后端(1) 双人对弈(1) 时钟(1) Vscode(3) 2022年7月新番(1) OVERLORD(1) 算法(1)
You might like
PHP保存带BOM文件的方法
2015/02/12 PHP
php数组合并与拆分实例分析
2015/06/12 PHP
PHP关联数组实现根据元素值删除元素的方法
2015/06/26 PHP
作为程序员必知的16个最佳PHP库
2015/12/09 PHP
PHP使用pdo连接access数据库并循环显示数据操作示例
2018/06/05 PHP
PHP反射学习入门示例
2019/06/14 PHP
PHP Ajax跨域问题解决方案代码实例
2020/08/01 PHP
用jquery实现的模拟QQ邮箱里的收件人选取及其他效果(一)
2011/01/06 Javascript
jQuery Ajax提交表单查询获得数据实例代码
2012/09/19 Javascript
Javascript浅谈之this
2013/12/17 Javascript
Ext GridPanel加载完数据后进行操作示例代码
2014/06/17 Javascript
JavaScript设计模式之单例模式实例
2014/09/24 Javascript
封装属于自己的JS组件
2016/01/27 Javascript
javascript中闭包概念与用法深入理解
2016/12/15 Javascript
JQueryEasyUI框架下的combobox的取值和绑定的方法
2017/01/22 Javascript
Vue之Watcher源码解析（1）
2017/07/19 Javascript
解决echarts图表使用v-show控制图表显示不全的问题
2020/07/19 Javascript
微信小程序弹窗禁止页面滚动的实现代码
2020/12/30 Javascript
[15:20]DOTA2亚洲邀请赛总决赛开幕式表演：羽泉献唱
2017/04/05 DOTA
Pyhthon中使用compileall模块编译源文件为pyc文件
2015/04/28 Python
Python中new方法的详解
2019/01/15 Python
python实现连续变量最优分箱详解--CART算法
2019/11/22 Python
使用python实现数组、链表、队列、栈的方法
2019/12/20 Python
解决python3插入mysql时内容带有引号的问题
2020/03/02 Python
Python无头爬虫下载文件的实现
2020/04/02 Python
Python3如何使用tabulate打印数据
2020/09/25 Python
小学生自我鉴定
2013/10/12 职场文书
岗位职责的定义
2013/11/10 职场文书
实习自我鉴定
2013/12/15 职场文书
施工班组长岗位职责
2014/01/05 职场文书
聊城大学毕业生自荐书
2014/02/01 职场文书
竞聘上岗演讲稿
2014/05/16 职场文书
禁毒宣传工作方案
2014/05/23 职场文书
工商管理本科生求职信
2014/07/13 职场文书
四风问题专项整治工作情况报告
2014/10/28 职场文书
吉利入股戴姆勒后smart“长大了”
2022/04/21 数码科技