Telephone组件

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

组件场景

1. 需要输入座机号，至少包含区号和座机号，分机号为非必填字段
2. 输入一个字符号串 023-45670987，输出也是一个字符串 023-65670987

Antd Form受控组件

1. Antd表单中，一个getFieldDecorator里只能包含一个受控组件，否则，js脚本会报错，
   1. 其实这也不难理解，如果有多个受控组件，表单的值改变，是改变那个组件的value呢？
2. 自定义封装一个受控组件，在组件里去做具体的逻辑操作判断

3. antd受控组件

   value
   onChange

4. 如果将3个input框，分别放在3个Form.Item中，布局需要调整，如果再存在一定的关联关系，分开校验，就麻烦了，提示语在那个FormItem下面？？

5. 优化: 自定义封装一个受控组件，在组件里去做具体的逻辑操作判断

telephone组件

import React, { PureComponent } from 'react'
import { Input, Col } from 'antd'
class TelePhone extends PureComponent {
  state = {
    data: [],
  }
  componentDidMount() {
    // 受控组件中，可直接通过value属性，获取initialValue的默认值
    const { value = '' } = this.props
    if (!value) return
    const data = value.split('-')
    this.setState({ data })
  }
  onChange = e => {
    const { data } = this.state
    const { id, value } = e.currentTarget // <input id='0' value='23'>
    data[id] = value.replace(/^\s+|\s+$/gm, '') // 去除空格
    // 如果分机号为空，就删除数组最后一个，排除最后一个中划线 '023-45670987-'
    if (id === '2' && !value.length) {
      data.pop()
    }
    const newValue = data.join('-') // '023-45670987-23'
    if (newValue !== this.props.value) {
      this.props.onChange(newValue)
    }
  }
  render() {
    const { state, onChange } = this
    const [value1='', value2='', value3=''] = state.data
    return (
      <Input.Group>
        <Col span={7}>
          <Input
            id="0"
            placeholder="区号"
            value={value1}
            onChange={onChange}/>
        </Col>
        <Col span={10}>
          <Input
            id="1"
            placeholder="座机号"
            value={value2}
            onChange={onChange}/>
        </Col>
        <Col span={7}>
          <Input
            id="2"
            placeholder="分机号"
            value={value3}
            onChange={onChange}/>
        </Col>
      </Input.Group>
    )
  }
}
export default TelePhone

正则说明

1. \s表示匹配任何空白字符，包括空格、制表符、换页符等等,
   1. 等价于[ \f\n\r\t\v]而”\s+”则表示匹配任意多个上面的字符
2. [\s]表示，只要出现空白就匹配[\S]表示，非空白就匹配

   value.replace(/^\s+|\s+$/gm, '')

使用组件

<Col span={10}>
    <Form.Item label={ lang.column }>
        {form.getFieldDecorator('telephone', {
            initialValue: '', // 023-45670987
            rules: [
                {
                    required: true,
                    message: '请输入座机号',
                },
                {
                    pattern: /^(0[0-9]{2,3}-)([2-9][0-9]{6,7})+(-[0-9]{1,4})?$/,
                    message: '请输入正确的座机号',
                },
            ],
        })(<TelePhone onChange={ this.phoneChange }/>)
        }
    </Form.Item>
</Col>
// 实时获取数据
telephoneChange = (value) => {
    console.log('telephone', value)
}