基于antd封装的固话组件

Posted 2021-04-24 韶华随记

最近基于Ant Design Pro框架，着手一个项目的研发，在一个业务模块中，需要用户输入座机号，最开始，就在Form中放一个Input，让用户输入，但是这样就碰到一个问题：如何保证用户的输入是相同的，数据落库如何保持一致？

业务场景

在一个表单中，用户需要输入座机号，至少包含区号和座机号，分机号为非必填字段。

问题分析

进过对业务场景的分析，在一个输入框中，通过正则来判断座机号，似乎有点麻烦，既然如此，那就干脆直接点，直接分成三个输入框。这个想法没有问题，但是如何布局？如何校验？如何拼接一个完整的座机号？

在表单中，一个getFieldDecorator里只能包含一个受控组件，否则，js脚本会报错，其实这里也不难理解，如果有多个受控组件，表单的值改变，是改变那个组件的value呢？

如果将三个输入框，分别放在三个FormItem中，这样一方面，ui布局需要二次调整较多，另一方面，因为三个输入值，存在一定的关联关系，分开校验，比较麻烦，且校验的提示语在那个FormItem下，这个样式调整也比较麻烦。

针对以上的情况，选择自定义封装一个受控组件，在组件里去做具体的逻辑操作判断。