antd问题集

1、Form验证

Form.Item设置rules，有require、type等既定的，也有validator自定义的。设置了validateFirst，但是前面规则没通过还是会执行validator？ 最后发现是版本问题，从4.4.2升级到4.8.3就不会了。源码修改见下图： 详情请点击这里！

2、antd引用国际语言包报错

修改引用路径：
import zh_CN from 'antd/es/locale-provider/zh_CN';
改成
import zh_CN from 'antd/lib/locale-provider/zh_CN';

3、判断表单字段是否被校验过

form.isFieldsTouched(true)
以上是判断表单所有字段是否被校验过，当表单中有Form.List时，只有操作add、remove、move后该Field的touched才会改变

4、表单项onBlur才校验，提交按钮根据输入情况实时置灰或高亮

validateTrigger="onBlur"
onValuesChange={checkCanSubmit}

方案1：

const checkCanSubmit = (changedValues, allValues) => {
 	...
    
    const result = !form.getFieldsError().filter(({ errors }) => errors.length).length;
    canSubmit !== result && setCanSubmit(result);
  }

问题：form.getFieldsError()得到的错误信息不实时，因为设置了obBlur才校验
方案2：

const checkCanSubmit = (changedValues, allValues) => {
 	...
    form.validateFields().then(formData => {
      console.log('formData: ', formData);
      !canSubmit && setCanSubmit(true);
    }).catch(errInfo => {
      canSubmit && setCanSubmit(false);
    })
  }

问题：validateFields()会把错误信息显示出来，不符合需求onBlur才展示错误信息
方案3：

const checkCanSubmit = (changedValues, allValues) => {
 	...
    form.validateFields().then(formData => {
      console.log('formData: ', formData);
      !canSubmit && setCanSubmit(true);
    }).catch(errInfo => {
      canSubmit && setCanSubmit(false);
      console.log('errInfo: ', errInfo);
      // 这里不能展示错误信息
      let fieldInfos = [];
      errInfo.errorFields.forEach(errorField => {
        fieldInfos.push({name: errorField.name, errors: []})
      });
      form.setFields(fieldInfos);
    })
  }

手动将错误信息再删掉，这样不是最优解，有好的方案欢迎回复~

bug速递：这里遗漏了一点，之前onBlur校验出的错误，被setFields清空了！清空错误前要通过form.getFieldsError()得到已有的错误判断当前项是否需要清除

5、Select的Option，value和children不一样，Select会展示children

可以配置props：

optionLabelProp="value"