PhoneView.tsx 966 Bytes
Newer Older
陈帅's avatar
陈帅 committed
1
import React, { Fragment, PureComponent } from 'react';
陈帅's avatar
陈帅 committed
2

陈帅's avatar
陈帅 committed
3
import { Input } from 'antd';
4
import styles from './PhoneView.less';
陈帅's avatar
陈帅 committed
5

陈帅's avatar
陈帅 committed
6 7 8 9 10 11
interface PhoneViewProps {
  value?: string;
  onChange?: (value: string) => void;
}

class PhoneView extends PureComponent<PhoneViewProps> {
陈帅's avatar
陈帅 committed
12 13 14 15 16 17 18 19 20
  render() {
    const { value, onChange } = this.props;
    let values = ['', ''];
    if (value) {
      values = value.split('-');
    }
    return (
      <Fragment>
        <Input
21
          className={styles.area_code}
陈帅's avatar
陈帅 committed
22
          value={values[0]}
jim's avatar
jim committed
23
          onChange={e => {
陈帅's avatar
陈帅 committed
24 25 26
            if (onChange) {
              onChange(`${e.target.value}-${values[1]}`);
            }
陈帅's avatar
陈帅 committed
27 28 29
          }}
        />
        <Input
30
          className={styles.phone_number}
jim's avatar
jim committed
31
          onChange={e => {
陈帅's avatar
陈帅 committed
32 33 34
            if (onChange) {
              onChange(`${values[0]}-${e.target.value}`);
            }
陈帅's avatar
陈帅 committed
35 36 37 38 39 40 41 42 43
          }}
          value={values[1]}
        />
      </Fragment>
    );
  }
}

export default PhoneView;