前言
Ant Design 是蚂蚁出品的出色优秀的 React 组件库，相信使用 React 进行管理系统开发的小伙伴们或多或少都接触过 Ant Design。很多公司基于 React 开发的管理端系统也都是使用 Ant Design 的组件库。
因此，了解 Ant Design 的常见用法与坑点还是有必要的。
本系列文章针对 Ant Design 一些官方文档虽有提及，但是容易被忽略的，又比较重要常见的用法进行总结。同时对工作使用过程当中遇到的坑点进行归纳。
tip：文章使用的 4.x 版本的 Ant Design。
上一篇：Ant Design 常见用法与坑点总结（二）：Form 表单下拉框设置初始值
Input 输入框内容去除头尾空白
在填写 Form 表单时，我们往往会遇到这样的需求：Input 输入框输入的内容头尾不允许带有空格。有点类似于 trim() 方法的功能。
针对这个功能，整体上有3中实现思路：
- 在输入的过程中，禁止输入空白符
- 利用表单验证，如果头尾存在空格，则提示用户
- 提交表单时，自动去除头尾空白，用户无感
思路一：禁止输入空格
该方式利用 Form.Item 的 getValueFromEvent 属性，这个属性可以设置如何把输入的内容转换为表单项实际获取的值。需要传入一个函数。
e.target.value.replace(/(^s*)|(s*$)/g, '')}
// getValueFromEvent={(e) => { console.log(e.target); return e.target.value; }}
>
在上述代码中，e.target.value 即为输入框输入的值，而 Form.Item 表单项实际获取到的值是 e.target.value.replace(/(^s*)|(s*$)/g, '')。
这种方法在页面交互上表现为用户无法输入空格，其实用户体验并不友好，让人感觉更像是这个输入框有 bug，竟然不让我输入空格。
思路二：利用表单验证
使用 第一篇文章 提到的表单验证方法。
{
const reg = /(^s+)|(s+$)/;
if(reg.test(value)) {
return Promise.reject(new Error('前后不能有空格'));
}
return Promise.resolve();
}
}
]}
>
这里就体现出了自定义表单验证的优势，写法灵活，且在某些场景下能降低思考难度。/(^s+)|(s+$)/ 和 /(^S)((.)*S)?(S*$)/ 这两个正则，显然前者更容易写出来，后面这个不查半天资料都难写。
思路三：提交表单调用 trim() 方法
这种方法就是随便用户输入，在提交表单的时候再使用 trim() 方法去除前后空格。
但是既然设置了这个规则，还是有必要让用户知道，给用户提示，因此综合下来第二种方法是比较推荐的解决办法。
服务器托管，北京服务器托管，服务器租用 http://www.fwqtg.net
