首页
所有分类
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 相关文章推荐
JavaScript 数组的 uniq 方法
Jan 23 Javascript
javascript实现的距离现在多长时间后的一个格式化的日期
Oct 29 Javascript
基于jquery的动态创建表格的插件
Apr 05 Javascript
ASP.NET jQuery 实例3 (在TextBox里面阻止复制、剪切和粘贴事件)
Jan 13 Javascript
JS实现带缓冲效果打开、关闭、移动一个层的方法
May 09 Javascript
微信JSAPI支付操作需要注意的细节
Jan 10 Javascript
微信小程序--onShareAppMessage分享参数用处(页面分享)
Apr 18 Javascript
easyui datagrid 表格中操作栏 按钮图标不显示的解决方法
Jul 27 Javascript
JS闭包经典实例详解
Dec 20 Javascript
js中怎么判断两个字符串相等的实例
Jan 17 Javascript
vue自定义标签和单页面多路由的实现代码
May 03 Javascript
JavaScript常用进制转换及位运算实例解析
Oct 14 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
奥地利购物网站(28) 智利购物网站(5) 波兰购物网站(52) 斯洛伐克购物网站(7) 捷克购物网站(26) 沙特阿拉伯购物网站(9) 卡塔尔购物网站(3) 新西兰购物网站(42) 菲律宾购物网站(13) 阿联酋购物网站(26)
You might like
《神奇女侠：血脉》神力女超人大战犯罪公司
2020/04/09 欧美动漫
学习使用PHP数组
2006/10/09 PHP
PHP编程最快明白(第一讲 软件环境和准备工作）
2010/10/25 PHP
基于PHP遍历数组的方法汇总分析
2013/06/08 PHP
ThinkPHP的Widget扩展实例
2014/06/19 PHP
Zend Framework实现具有基本功能的留言本(附demo源码下载)
2016/03/22 PHP
利用PHP如何写APP接口详解
2016/08/23 PHP
php微信公众号开发之快递查询
2018/10/20 PHP
Thinkphp5.0框架使用模型Model的获取器、修改器、软删除数据操作示例
2019/10/11 PHP
7个Javascript地图脚本整理
2009/10/20 Javascript
js+jquery常用知识点汇总
2015/03/03 Javascript
JS实现图片局部放大或缩小的方法
2016/08/20 Javascript
JS利用cookies设置每隔24小时弹出框
2017/04/20 Javascript
Angular 2父子组件数据传递之@ViewChild获取子组件详解
2017/07/04 Javascript
antd 表格列宽自适应方法以及错误处理操作
2020/10/27 Javascript
详解使用Python处理文件目录的相关方法
2015/10/16 Python
深入了解Python数据类型之列表
2016/06/24 Python
python下10个简单实例代码
2017/11/15 Python
django2用iframe标签完成网页内嵌播放b站视频功能
2018/06/20 Python
在python中对变量判断是否为None的三种方法总结
2019/01/23 Python
详解python中__name__的意义以及作用
2019/08/07 Python
浅谈Tensorflow 动态双向RNN的输出问题
2020/01/20 Python
Python 开发工具PyCharm安装教程图文详解(新手必看)
2020/02/28 Python
python3实现往mysql中插入datetime类型的数据
2020/03/02 Python
keras中epoch,batch,loss,val_loss用法说明
2020/07/02 Python
曼联官方网上商店：Manchester United Direct
2017/07/28 全球购物
新西兰第一的行李箱网站：luggage.co.nz
2019/07/22 全球购物
银行财务部实习生的自我鉴定
2013/11/27 职场文书
违反工作纪律检讨书
2014/02/15 职场文书
导游词400字
2015/02/13 职场文书
师范生见习总结范文
2015/06/23 职场文书
城南旧事读书笔记
2015/06/29 职场文书
Linux安装Nginx步骤详解
2021/03/31 Servers
Python中os模块的简单使用及重命名操作
2021/04/17 Python
mybatis中sql语句CDATA标签的用法说明
2021/06/30 Java/Android
Win11运行育碧游戏总是崩溃怎么办 win11玩育碧游戏出现性能崩溃的解决办法
2022/04/06 数码科技