npm 包 @iduuck/react-phone-input 使用教程-JavaScript中文网-JavaScript教程资源分享门户

介绍

@iduuck/react-phone-input 是一个 React 组件，用于在前端实现电话号码的输入和格式化。它可以自动按国家/地区的电话格式要求展示电话号码，让用户正确输入手机号码变得更加便捷。

安装

经过 npm 包管理器，我们可以方便地安装 @iduuck/react-phone-input 。

使用 npm 安装：

npm install --save @iduuck/react-phone-input

使用 yarn 安装：

yarn add @iduuck/react-phone-input

使用

使用 @iduuck/react-phone-input 组件非常简单，您只需要使用 PhoneInput 组件即可。

以下是一个基本的使用示例：

-- -------------------- ---- -------
------ ------ - -------- - ---- --------
------ ---------- ---- ----------------------------
------ -------------------------------------------

-------- ----- -
  ----- ------- --------- - -------------
  ----- ------------ - ------- -- -
    ----------------
  --
  ------ -
    -----------
      ------------------
      -------------
      -----------------------
    --
  --
-

------ ------- ----

API

@iduuck/react-phone-input 组件提供了一些很有用的 API，让您可以根据实际需求进行配置。

props

属性名	类型	默认值	描述
`value`	string	`""`	组件的值
`onChange`	(value) => void	`undefined`	当输入框的值发生变化时触发的回调函数
`onEnterKeyPress`	() => void	`undefined`	当用户在输入框中按下 "Enter" 键时触发的回调函数
`defaultCountry`	string	`"us"`	组件的默认国家代码
`countriesBlackList`	string[]	`[]`	不支持的国家列表
`countriesWhiteList`	string[]	`[]`	支持的国家列表
`onlyCountries`	string[]	`[]`	允许使用的国家代码列表，其他的国家会被屏蔽
`preferredCountries`	string[]	`["IN", "US", "GB"]`	在组件选项中显示的国家列表
`inputProps`	object	`{}`	将组件的 prop 传递给底层 `input` 元素的对象
`inputClass`	string	`""`	底层 `input` 元素的自定义类名
`dropdownClass`	string	`""`	下拉列表的自定义类名
`inputStyle`	object	`{}`	底层 `input` 元素的自定义样式
`dropdownStyle`	object	`{}`	下拉列表的自定义样式
`dropdownProps`	object	`{}`	将组件的 prop 传递给底层 `<Dropdown/>` 元素的对象
`disableDropdown`	boolean	`false`	禁用下拉列表功能
`autoFormat`	boolean	`true`	自动格式化电话号码
`disableCountryCode`	boolean	`false`	禁用国家码部分的输入
`international`	boolean	`false`	显示国际号码格式
`disableSearchIcon`	boolean	`false`	关闭搜索图标
`searchClass`	string	`""`	搜索图标的自定义类名
`searchStyle`	object	`{}`	搜索图标的自定义样式
`onlyCountriesIndices`	number[]	`undefined`	允许使用的国家代码列表所对应的下标
`showDropDownIcon`	boolean	`true`	显示下拉菜单图标
`showCountrySelect`	boolean	`true`	显示国家选择框
`disableAreaCodes`	boolean	`false`	禁用区号输入
`showAreaCodes`	boolean	`false`	显示区号
`areaCodes`	Object[]	`undefined`	自定义区号列表
`countryCodeEditable`	boolean	`true`	允许用户更改国家代码
`textFieldProps`	object	`{}`	将组件的 prop 传递给底层 `textField` 元素的对象
`disableInitialPlaceholder`	boolean	`false`	禁用底层 input 的 initialPlaceholder 属性
`inputProps`	object	`{}`	将组件的其余 prop 传递给底层输入框

总结

@iduuck/react-phone-input 是一个能够为 React 项目提供电话号码输入和格式化的强大组件。使用它可以极大地提高应用程序的人机交互体验，让用户更加方便地输入和呈现电话号码。希望本教程能够帮助您更好地了解这个组件，并在项目中实现更优秀的电话号码处理方案。

来源：JavaScript中文网，转载请注明来源 https://www.javascriptcn.com/post/60066bbf967216659e244179