基于antd封装的固话组件

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

业务场景

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

问题分析

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

1. 在表单中，一个getFieldDecorator里只能包含一个受控组件，否则，js脚本会报错，其实这里也不难理解，如果有多个受控组件，表单的值改变，是改变那个组件的value呢？
2. 如果将三个输入框，分别放在三个FormItem中，这样一方面，ui布局需要二次调整较多，另一方面，因为三个输入值，存在一定的关联关系，分开校验，比较麻烦，且校验的提示语在那个FormItem下，这个样式调整也比较麻烦。

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

代码实现

组件代码

import React, { PureComponent } from 'react';
import {Input,Col} from 'antd';
const InputGroup = Input.Group;
class TelPhone extends PureComponent {
  state = {
    codeArr:[]
  }
  componentDidMount() {
    const {value=''} = this.props;
    const codeArr = value.split('-');
    this.setState({
      codeArr
    })
  }
  changeTel = e =>{
    let {codeArr=[]} = this.state
    const {id,value} = e.currentTarget
    codeArr[id] = value.replace(/^\s+|\s+$/gm,'');
    if(id==2&&value.length==0){
      codeArr.pop();
    }
    const str = codeArr.join('-');
    if(str!=this.props.value){
      this.props.onChange(str)
    }
  }
  render(){
    const {codeArr=[]} = this.state
    return (
      <InputGroup>
        <Col span={7}>
            <Input id="0" defaultValue={codeArr[0]} placeholder="区号" onChange={this.changeTel}/>
        </Col>
        <Col span={10}>
            <Input id="1" defaultValue={codeArr[1]} placeholder="座机号" onChange={this.changeTel}/>
        </Col>
        <Col span={7}>
            <Input id="2" defaultValue={codeArr[2]} placeholder="分机号" onChange={this.changeTel}/>
        </Col>
      </InputGroup>
    )
  }
}

export default TelPhone;

业务使用

		<Col span={colNum}>
          <FormItem  {...formItemLayout} label="座机号">
            {getFieldDecorator('contactTel', {
              rules: [{
                pattern: /^(0[0-9]{2,3}-)([2-9][0-9]{6,7})+(-[0-9]{1,4})?$/,
                message: '请输入正确的座机号'
              }, {
                required: true, 
                message: '请输入座机号'
              }],
            })(
              <TelPhone/>
            )}
          </FormItem>
        </Col>

分析总结

1. 封装的受控组件，可直接通过value属性，获取initialValue的默认值，做相应的处理，回填到Input中
2. 在子组件中，input的值发生改变，则可通过props.onChange，将子组件中处理好的座机号传递到父组件中，在父组件中直接获取值。
3. 座机号的正则/^(0[0-9]{2,3}-)([2-9][0-9]{6,7})+(-[0-9]{1,4})?$/，区号0开头3或4位，座机号2开头7或8位，分机号最多4位。