共计 1412 个字符，预计需要花费 4 分钟才能阅读完成。
前言
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 属性，这个属性能够设置如何把输出的内容转换为表单项理论获取的值。须要传入一个函数。
<Form.Item
name="city"
label="城市"
getValueFromEvent={(e) => e.target.value.replace(/(^\s*)|(\s*$)/g, '')}
// getValueFromEvent={(e) => {console.log(e.target); return e.target.value; }}
>
<Input />
</Form.Item> 在上述代码中，e.target.value 即为输入框输出的值，而 Form.Item 表单项理论获取到的值是 e.target.value.replace(/(^\s*)|(\s*$)/g, '')。
这种办法在页面交互上体现为用户无奈输出空格，其实用户体验并不敌对，让人感觉更像是这个输入框有 bug，居然不让我输出空格。
思路二：利用表单验证
应用 第一篇文章 提到的表单验证办法。
<Form.Item
name="city"
label="城市"
rules={[{ pattern: /(^\S)((.)*\S)?(\S*$)/, message: '前后不能有空格' }
]}
>
<Input />
</Form.Item><Form.Item
name="city"
label="城市"
rules={[
{validator: (_, value) => {const reg = /(^\s+)|(\s+$)/;
if(reg.test(value)) {return Promise.reject(new Error('前后不能有空格'));
}
return Promise.resolve();}
}
]}
>
<Input />
</Form.Item> 这里就体现出了自定义表单验证的劣势，写法灵便，且在某些场景下能升高思考难度。/(^\s+)|(\s+$)/ 和 /(^\S)((.)*\S)?(\S*$)/ 这两个正则，显然前者更容易写进去，前面这个不查半天材料都难写。
思路三：提交表单调用 trim() 办法
这种办法就是轻易用户输出，在提交表单的时候再应用 trim() 办法去除前后空格。
然而既然设置了这个规定，还是有必要让用户晓得，给用户提醒，因而综合下来第二种办法是比拟举荐的解决办法。