使用react16.4.2 + antd 3.x 开发中 遇到的一些问题,和解决方法

一, react antd 时间组件DatePicker报错The above error occurred in the 「CalenderWrapper」 component

1.在做一个新增页面antd的DatePicker组件报错,导致页面第一次添加成功,第二次新增页面无法打开
使用react16.4.2 + antd 3.x 开发中 遇到的一些问题,和解决方法_第1张图片
debugger发现提交成功后,是这个value.locale方法报错undefined引起的一系列问题
value传入的是个字符串
使用react16.4.2 + antd 3.x 开发中 遇到的一些问题,和解决方法_第2张图片
但是initialValue是传入的moment对象
使用react16.4.2 + antd 3.x 开发中 遇到的一些问题,和解决方法_第3张图片
后来花了半天时间才找到问题,提交的时候调用了setFieldsValue这里又重新set了一次value,子组件点击提交,会立即render一次,这时候的date值还是提交之前format过的string值,而第一次没有报错,是因为值是initialValue。
使用react16.4.2 + antd 3.x 开发中 遇到的一些问题,和解决方法_第4张图片还是要对react生命周期了解清楚。不然搬轮子都不会,一头雾水。就这…

 

二,antd form表单交中的验证问题

form表单校验,非必须的验证,required改为false,加上pattern就可以进行校验
使用react16.4.2 + antd 3.x 开发中 遇到的一些问题,和解决方法_第5张图片
关于form提交,多余的字段,不知道大佬是怎么提交的,我是用隐藏域
提交的时候赋值。

<Col span={1}>
  <FormItem >
    {getFieldDecorator(`zhixukeminjing`, {})(
      <Input type={'hidden'}/>
    )}
  </FormItem>
</Col>

//各种验证规则

/* 车牌验证规则,全部验证用,例如修改信息。提交信息*/
export function carNumSRegExp() {
	return new RegExp(/^[京津沪渝冀豫云辽黑湘皖鲁新苏浙赣鄂桂甘晋蒙陕吉闽贵粤青藏川宁琼使领A-Z]{1}[A-Z]{1}[A-Z0-9]{4,5}[A-Z0-9挂学警港澳]{1}$|^[京津沪渝冀豫云辽黑湘皖鲁新苏浙赣鄂桂甘晋蒙陕吉闽贵粤青藏川宁琼使领A-Z]{1}$/i);
}
export function carNumRegExp() {
	return new RegExp(/^[京津沪渝冀豫云辽黑湘皖鲁新苏浙赣鄂桂甘晋蒙陕吉闽贵粤青藏川宁琼使领A-Z]{1}[A-Z]{1}[A-Z0-9]{4,5}[A-Z0-9挂学警港澳]{1}$/i);
}
/* 手机号验证规则*/
export function phoneNumRegExp() {
	return new RegExp(/^1([358][0-9]|4[579]|66|7[0135678]|9[89])[0-9]{8}$/);
}
/* 座机号验证规则*/
export function mobileNumRegExp() {
	return new RegExp(/^((0\d{2,3}-\d{7,8})|(1([358][0-9]|4[579]|66|7[0135678]|9[89])[0-9]{8}))$/);
}
/**邮箱验证规则*/
export function emailRegExp() {
  return new RegExp(/^[A-Za-z0-9\u4e00-\u9fa5]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/);
  //^[A-Za-z0-9\u4e00-\u9fa5]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$
}

//车牌地区搜索组件 实现效果大概是下面的样子
使用react16.4.2 + antd 3.x 开发中 遇到的一些问题,和解决方法_第6张图片
具体实现
在这里插入图片描述

使用react16.4.2 + antd 3.x 开发中 遇到的一些问题,和解决方法_第7张图片
CommCarNumberInput组件代码
https://download.csdn.net/download/qq_39658059/12635070

你可能感兴趣的:(exception,react)