rc-form 源码

v2.0.0
在查看公司代码的时候发现我们的CommonSelect如果不加onChange事件的话，点击下拉框后，数据不会被选中，查看CommonSelect，

  onChange = func => SelectValue => {
    if (SelectValue.includes('undefined')) {
      SelectValue = undefined
    }
    this.setState({ value: SelectValue })
    return func(SelectValue)
  }

  render() {
    const { list = [], onChange, ...restProps } = this.props
    const otherProps = omit(restProps, ['clearLabel', 'value'])

    return (//下面做了判断，所以必须传递onChange函数进来
      <Select onChange={onChange && this.onChange(onChange)} value={this.state.value} list={list} {...otherProps}>
        {this.state.list.map((item, i) => {
          const { label, value, disabled } = item
          return (
            <Option key={i} disabled={!!disabled} value={typeof value === 'number' ? value.toString() : value}>
              {label}
            </Option>
          )
        })}
      </Select>
    )
  }

使用

                    <CommonSelect
                      placeholder="请选择"
                      size="middle"
                      allowClear
                      showSearch
                      list={typelist}
                      errorTips={getFieldError('type')}
                      {...getFieldProps('type', {
                        rules: [
                          {
                            required: true,
                            message: '请输入类型',
                          },
                        ],
                      })}
                    />

使用了getFieldProps后得到了下面的结果

多出了一个onChange事件的props

然后去翻阅rc-form createBaseForm.js代码：

 validateTriggers.forEach((action) => {
          if (inputProps[action]) return;
          inputProps[action] = this.getCacheBind(name, action, this.onCollectValidate);
        });
// 经过一系列的处理将组件的onChange事件绑定到了onCollectValidate函数
      onCollectValidate(name_, action, ...args) {
        const { field, fieldMeta } = this.onCollectCommon(name_, action, args);
        const newField = {
          ...field,
          dirty: true,
        };
        this.validateFieldsInternal([newField], {// 该函数根据传进来的props校验规则对value进行校验
          action,
          options: {
            firstFields: !!fieldMeta.validateFirst,
          },
        });
      },

validateFieldsInternal最后调用async-validator库进行校验

createFieldsStore.js就是存储所有被getFieldProps包裹表单的props,从这边也可以看出表单检验触发的时机为onChange

createFieldsStore.js

2. 校验规则：

 rules: [
          {
            required: true,
            pattern: integerPattern,
            message: '必填且为整数',
            validator: validator,
          },
        ],

这么写校验规则的话，async-validator并不会去校验integerPattern，直接走了validator函数

 rules: [
          {
            required: true,
            pattern: integerPattern,
            message: '必填且为整数',
          },
          {
            validator: validator,
          },
        ],

这么写正则和validator都会去校验,并且和二者的顺序无关

3. 动态新建删除被getFieldDecorator包裹的表单组件
   我的每个表单都是被getFieldDecorator包裹着的，这样提交的时候直接调用validateFields就可以拿到所有被包裹着的表单的数据

const { validateFields } = this.props.form
    validateFields((err, values) => {
      if (!err) {
        console.info(values)
      }
      console.info(values)
    })

getFieldDecorator的用法：

this.props.form.getFieldDecorator(id, options)

首先要确保新增的表单组件每个id都是独立的，新增的时候在表单里面更改数据是完全没有问题的，新增一个以上表单，然后一个新增的表单，编辑其他表单的数据，这个时候剩下的那个新增表单的数据都没了，翻阅了rc-form的源码，在我删除一个新增的表单的时候会走下面的代码：

clearField(name) {
    delete this.fields[name];
    delete this.fieldsMeta[name];
 }

但随后clearField再次被调用，另外一个新增的表单的存在FieldsStore的fieldsMeta里的数据也被删除了，问题出在了这里，接下来我在

  componentDidUpdate(prevProps, prevState) {
    console.info(prevProps, prevState)
    console.info(this.props.form.getFieldsValue())//这个地方显示新增的那个表单的数据为undefined
  }

找到了出错的点，但是没有发现原因，然后在ant.design代码库找到了解决办法form 动态增减表单项 ，减少的时候仍会对删除的表单进行校验,也就是每个新增的表单的key必须是独一无二的，我开始是用的数组的index作为key，但是删除的时候重排了，后面一条组件的key和被删除的那一条相同了，问题应该在这里，问题得到了解决。