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

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

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

 

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

form表单校验，非必须的验证，required改为false，加上pattern就可以进行校验 关于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_-]+)+$ }

//车牌地区搜索组件 实现效果大概是下面的样子 具体实现

CommCarNumberInput组件代码 https://download.csdn.net/download/qq_39658059/12635070

三，在react 15.4.0和antd 2.10.2 SCRIPT16389: 未指明的错误

碰到的巨鸡儿坑的问题，花了一天多的时间解决的。问题是这样的: 在其他浏览器都能正常访问，只有IE浏览器访问不正常，单独访问没有任何问题 接下来开始踏上不归路了，在IE浏览器上页面偶尔会出现 SCRIPT16389: 未指明的错误 这一个错误，具体位置是这个方法 document.activeElement 方法传了个null抛出的未定义异常 ，网上找了好多并没有解决问题。最后一个一个组件在ie浏览器下测试找到了具体报错的组件， 总结 不知道为什么ie单独访问页面没有问题，有时候出现这种IE兼容性不会在控制台显示，可以在下面的设置快速定位具体的位置 ，

具体问题具体分析。真是日了狗了。

四，在antd 3.x中 使用Table组件遇到的问题

1.表格内容超长省略，在定义column的时候设置onCell样式

onCell: () => { return { style: { overflow: 'hidden', //（多出的文字，隐藏） whiteSpace: 'nowrap', //（不换行，一行显示） textOverflow: 'ellipsis', //（溢出用省略号） width:'24%', cursor: 'default' } } },

2.表格加上选择框后 标题和内容对不齐

title: '操作', //标题 key: 'action', align: 'center', width: '6%', onCell: ()=>{ return { style:{ overflow: 'hidden', whiteSpace: 'nowrap', textOverflow: 'ellipsis', cursor: 'default', width:'6%' } } }, render: (text, record) => { return ( <span> <Tooltip placement="topRight" title='编辑'> &nbsp;&nbsp;<Icon style={{marginRight:6,cursor:'Pointer'}} type="edit" onClick={()=>{this.edits(record)}}/> </Tooltip> <Tooltip placement="topRight" title='删除'> &nbsp;&nbsp;<Icon style={{marginLeft:2,cursor:'Pointer'}}type="delete" onClick={()=>{this.dele(record)}}/> </Tooltip> <Tooltip placement="topRight" title='审批'> &nbsp;&nbsp;<Icon style={{marginLeft:2,cursor:'Pointer'}}type="delete" onClick={()=>{this.dele(record)}}/> </Tooltip> </span> ); } },

Table组件的css样式

.tableList{ :global{ .ant-table-pagination.ant-pagination{ text-align: center !important; margin: 16px 0; float: none; } .ant-table-placeholder{ height: auto; } .ant-table-body table tbody{ display:block; height:auto; max-height: 519px; overflow-x: scroll; } .ant-table-body table thead,tbody tr{ display:table; width:100%; table-layout: fixed; } .ant-table-body table thead{ width:calc(100% - 0.5em); } } }