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
- 校验规则：
rules: [
{
required: true,
pattern: integerPattern,
message: '必填且为整数',
validator: validator,
},
],
这么写校验规则的话，async-validator并不会去校验integerPattern，直接走了validator函数
rules: [
{
required: true,
pattern: integerPattern,
message: '必填且为整数',
},
{
validator: validator,
},
],
这么写正则和validator都会去校验,并且和二者的顺序无关
- 动态新建删除被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和被删除的那一条相同了，问题应该在这里，问题得到了解决。
