{"size": 742, "ext": "js", "max_stars_repo_path": "src/components/Mobile.js", "max_stars_repo_name": "ranwawa/test-FE-react", "max_stars_repo_stars_event_min_datetime": null, "max_stars_repo_stars_event_max_datetime": null, "max_issues_repo_path": "src/components/Mobile.js", "max_issues_repo_name": "ranwawa/test-FE-react", "max_issues_repo_issues_event_min_datetime": null, "max_issues_repo_issues_event_max_datetime": null, "max_forks_repo_path": "src/components/Mobile.js", "max_forks_repo_name": "ranwawa/test-FE-react", "max_forks_repo_forks_event_min_datetime": "2021-10-12T13:42:59.000Z", "max_forks_repo_forks_event_max_datetime": "2021-10-12T13:42:59.000Z"}
{"max_stars_count": null, "max_issues_count": null, "max_forks_count": 1, "avg_line_length": 19.0256410256, "max_line_length": 41, "alphanum_fraction": 0.5444743935}
import { Form, Input } from 'antd';
import { useState } from 'react';
import { isMobile } from '../utils';

const Mobile = ({ value, setValue }) => {
  const [err, setErr] = useState('');

  function handleInputChange(e) {
    setValue(e.target.value);
    setErr('');
  }

  function handleInputBlur() {
    if (value === '') {
      setErr('');
    } else if (!isMobile(value)) {
      setErr('手机号码格式有误');
    }
  }

  return (
    <Form.Item
      label='用户名'
      name='username'
      validateStatus={err ? 'error' : ''}
      help={err}
    >
      <Input
        placeholder='请输入手机号'
        value={value}
        onChange={handleInputChange}
        onBlur={handleInputBlur}
      />
    </Form.Item>
  );
};

export default Mobile;
