NPM包推荐(1)：react-phone-number-input格式化电话号码

电话号码的表单输入通常处理起来非常麻烦，如果您的产品面向国际用户，那么电话号码输入字段必须适应不同国家的呼叫代码。为了准确起见，最佳实践还需要添加屏蔽策略，自动根据所拨打的国家格式化电话号码。

在React中，使用刚发布的一个名为react-phone-number-input的包可实现上述所有功能，非常方便。

安装

npm install react-phone-number-input --save

使用

该组件有两种。

有下拉表

包导出的默认组件是一个电话号码输入框<input/>和一个国家列表<select/>。

需要引入样式表：react-phone-number-input/style.css。

import React, { useState } from 'react';
import PhoneInput from 'react-phone-number-input'
import 'react-phone-number-input/style.css'

export default function App() {
  const [value, setValue] = useState()
  return (
    <div className="App">
      <PhoneInput
        placeholder="输入电话号码"
        value={value}
        onChange={setValue}/>
    </div>
  );
}

无下拉表

组件仅有一个电话号码输入框<input/>。

从react-phone-number-input/input子包导入。

import "./styles.css";
import React, { useState } from "react";
import PhoneInput from "react-phone-number-input/input";

export default function App() {
  const [value, setValue] = useState();
  return (
    <div className="App">
      <PhoneInput
        placeholder="输入电话号码"
        value={value}
        onChange={setValue}
      />
    </div>
  );
}

示例项目：https://codesandbox.io/s/spring-silence-vb471

代码托管在gitlab：https://gitlab.com/catamphetamine/react-phone-number-input

官方Demo：https://catamphetamine.gitlab.io/react-phone-number-input/

（版权归享岚网所有，未经许可不得转载）

Leave a Comment Cancel Reply