onchange事件实现编辑_Antd Form 实现机制解析

? 想要了解更多不掺水的原创，请戳上方蓝色字体： 政采云前端团队 关注我们吧～

本文首发于政采云前端团队博客：Antd Form 实现机制解析

https://www.zoo.team/article/antd-form

背景

“

在中后台业务中，表单页面基础的场景包括组件值的收集、校验和更新。在 to B 业务中，表单页面的需求往往更复杂和定制化，除了上述的基本操作，还要处理包括自定义表单组件、表单联动、表单的异步检验等复杂场景，在一些大型表单页面中还要考虑性能的问题，表单页面的需求往往是新同学摔得第一个跤。

本文分为两个部分，第一部分会通过对 Antd Form 源码的分析来帮助大家对 Form 的整体设计和流程有一个清晰的概念，第二部分会分享一些复杂场景的解决方案。希望可以帮助大家更容易的处理表单需求和快速定位表单场景中的问题。

本文并不涉及过于具体的源码实现分析，大家可以放松心情，一起来对 Form 有一个感性的认知吧～

Form 组件解决了什么问题

首先我们先看一个简单的表单，收集并校验两个组件的值。只需要通过监听两个表单组件的 onChange 事件，获取表单项的 value，根据定义的校验规则对 value 进行检验，生成检验状态和检验信息，再通过 setState 驱动视图更新，展示组件的值以及校验信息即可。

代码实现可能是这样的：

export default class LoginForm extends React.Component {
    
  state = {
    
username:{
    
value: '',
error: '',
    },
password:{
    
value: '',
error: '',
    },
  }

  fieldMeta = {
    
username:{
    
rules:[],
  },
password:{
    
rules:[],
   },
 }

  onInputChange = (e) => {
    
const { value,name } = e.target;
// 获取校验结果
const error = this.doValidate(value, name);

this.setState({
    
     [name]:{
    
       value,
       error,
     }
   })
  }

  validator = (value, rules) => {
    
  	...
  }

  doValidate = (value, name) => {
    
// 读取校验规则
const { rules } = this.fieldMeta[name];
return validator(value,rules);
  }

  render() {
    
const { username, password } = this.state;
return (


{username.error}


{password.error}

登录

);
}
}


用流程图来表示是这样的：

简单流程

上面的实现，我们设定了一个表单数据状态的模型，来维护组件的 value 和校验的错误信息。

this.state = {
    
  [field1]:{
    
    value: '',
    error: '',
  },
  [field2]:{
    
    value: '',
    error: '',
  },
  ...
}

还有一个字段配置相关的模型，维护组件对应的校验规则。

fieldMeta = {
    
username:{
    
rules:[]
  },
password:{
    
rules:[],
  }
}

对于这种简单的业务场景，上述方式完全可以满足需求。具体到真实的业务场景，往往更复杂，其中包含多种表单组件，如 Input、Checkbox、Radio、Upload，还有一些自定义表单组件。

这个时候如果继续采用这种方式，不仅需要维护多个 onChange 事件，还要对不同组件 value 的取值做差异化处理，以及对各个组件的校验以及触发时机规则进行维护，就很容易出现“祖传代码”。

对表单场景进行归纳，可以发现每个组件的数据收集、校验、数据更新的流程其实是一致的。对这个流程进行抽象，并且通过一些配置屏蔽组件间的差异性，再对组件的值以及组件的配置规则统一管理，就是我们常见的 Form 表单的解决方案。

Antd Form 是怎么实现的

要实现上面的方案需要解决三个问题：

• 如何实时收集内部组件的数据？

• 如何对组件的数据进行校验？

• 如何更新组件的数据？

下面我们就带着这三个问题，一起看看 Antd Form 是如何来做的吧~

先看一下 Form class 的结构，Form 组件有两个静态属性 Item、createFormField 和一个静态方法 create，Item 是对 FormItem 组件的引用，createFormField 指向 rc-form 提供的同名方法，create 方法则是对  rc-form createDOMForm 的调用，为了方便理解，这边隐藏了部分代码，Form class 整体的结构如下：

import * as React from 'react';
import * as PropTypes from 'prop-types';
import classNames from 'classnames';
import createDOMForm from 'rc-form/lib/createDOMForm';
import createFormField from 'rc-form/lib/createFormField';
import omit from 'omit.js';
import { ConfigConsumer, ConfigConsumerProps } from '../config-provider';
import { tuple } from '../_util/type';
import warning from '../_util/warning';
import FormItem from './FormItem';
import { FIELD_META_PROP, FIELD_DATA_PROP } from './constants';
import FormContext from './context';

const FormLayouts = tuple('horizontal', 'inline', 'vertical');

export default class Form extends React.Component{
    
static defaultProps = {
    
colon: true,
layout: 'horizontal',
hideRequiredMark: false,
    onSubmit(e: React.FormEven