react控制电话格式

待我称王封你为后i 2024-04-19 10:35 34阅读 0赞

import React, { Component } from "react";
    import phoneutil from "google-libphonenumber";
    import _ from "lodash";
    function formatNumber(p) {
      const PNF = phoneutil.PhoneNumberFormat;
      const phoneUtil = phoneutil.PhoneNumberUtil.getInstance();
      let region = "US";
      if (p.trim().length === 11 && !_.startsWith(p, "+")) {
        region = "CN";
      }
      // if (p.includes("(")) {
      //   return p;
      // }
      const number = phoneUtil.parse(p, region);
      if (phoneUtil.isValidNumber(number)) {
        let formatE164 = phoneUtil.format(number, PNF.E164);
        const parserNumber = phoneUtil.parseAndKeepRawInput(formatE164);
        return phoneUtil.format(parserNumber, PNF.NATIONAL);
        // return phoneUtil.format(parserNumber, PNF.NATIONAL).replace(/\s+/g, "");
      } else {
        return "INVALID";
      }
    }
    
    function phoneWithCountryCode(p) {
      const PNF = phoneutil.PhoneNumberFormat;
      const phoneUtil = phoneutil.PhoneNumberUtil.getInstance();
      let region = "US";
      if (p.trim().length === 11 && !_.startsWith(p, "+")) {
        region = "CN";
      }
      if (p.includes("(")) {
        return p;
      }
      const number = phoneUtil.parse(p, region);
      if (phoneUtil.isValidNumber(number)) {
        return phoneUtil.format(number, PNF.E164);
      } else {
        return "";
      }
    }
    class App extends Component {
      render() {
        const phone = !_.isEmpty(p.phone) ? this.getNumber(p.phone).trim() : "";
        return (
          <div>
          </div>
        );
      }
    }
    export default App;

*  一个不错的电话输入组件

import React, { Component } from "react";
    import 'react-phone-number-input/style.css'
    import PhoneInput from 'react-phone-number-input'
    class App extends Component {
      constructor(props) {
        super(props);
        this.state = {
          phone: ""
        }
      }
      onChange(phone){
        console.log("phone",phone)
    		this.setState({phone:phone})
    	}
      render() {
        return (
          <PhoneInput
            country="US"  //设置默认国家
            placeholder="Enter phone number"
            value={ this.state.phone }
            onChange={ phone => this.onChange(phone) } />
        );
      }
    }
    export default App;

*  一个限制电话长度的电话输入框（最推荐这个）

这个组件版本号（2.9.2 and 2.9.3）组件内更换国家会出现问题，2.10.0版本无法正常部署在正式环境，目前只有2.8.0版本是正常的。目前最新版本2.13.9也是正常的

import React, { Component } from "react";
    import ReactPhoneInput from "react-phone-input-2";
    import 'react-phone-input-2/dist/style.css'
    class App extends Component {
      constructor(props) {
        super(props);
        this.state = {
          phone: ""
        }
      }
      handleOnChange = value => {
        console.log(value);
        let noSym1 = value.replace("(","")
        let noSym2 = noSym1.replace(")","")
        let noSym3 = noSym2.replace("-","")
        let noBlank = noSym3.replace(/\s+/g,"")
        console.log("noSym",noSym3)
        console.log("noBlank",noBlank)
        this.setState({ phone: value }, () => {
          console.log(this.state.phone);
        });
      };
      render() {
        console.log("this.state.phone")
        return (
          <ReactPhoneInput
              inputExtraProps={
       {
                name: "phone",
                required: true,
                autoFocus: true
              }}
              defaultCountry={"us"}
              value={this.state.phone}
              onChange={this.handleOnChange}
            />
        );
      }
    }
    export default App;