PhoneView.tsx 1 KB
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
            // tslint:disable-next-line: no-unused-expression
陈帅's avatar
陈帅 committed
25
            onChange && onChange(`${e.target.value}-${values[1]}`);
陈帅's avatar
陈帅 committed
26 27 28
          }}
        />
        <Input
29
          className={styles.phone_number}
jim's avatar
jim committed
30
          onChange={e => {
陈帅's avatar
陈帅 committed
31
            // tslint:disable-next-line: no-unused-expression
陈帅's avatar
陈帅 committed
32
            onChange && onChange(`${values[0]}-${e.target.value}`);
陈帅's avatar
陈帅 committed
33 34 35 36 37 38 39 40 41
          }}
          value={values[1]}
        />
      </Fragment>
    );
  }
}

export default PhoneView;