前端开发中，我们经常需要在表单中添加手机号码输入框。而基于 React 的 @oledm/react-telephone-input 这个 npm 包提供了一个方便易用的手机号码输入框组件，可以帮助我们快速构建一个通用的手机号码输入框。
安装
要使用 @oledm/react-telephone-input，我们需要首先安装它。可以使用 npm 或 yarn 安装：
npm install @oledm/react-telephone-input
或
yarn add @oledm/react-telephone-input
使用
当我们安装好 @oledm/react-telephone-input 后，就可以在 React 项目中使用了。首先，需要在项目中引入这个组件：
import React, { useState } from 'react';
import ReactTelephoneInput from '@oledm/react-telephone-input';
import '@oledm/react-telephone-input/lib/ReactTelephoneInput.css'; // 引入样式文件然后在 HTML 中添加 ReactTelephoneInput 组件，并设置一些属性：
-- -------------------- ---- -------
--------------------
-------------------
-------------------------- ------
-------------
----- ------------
--------- -----
--
---------------------------
--ReactTelephoneInput 组件有很多可用的属性，下面我们逐一讲解。
defaultCountry
defaultCountry 属性用于设置默认的国家/地区。它接受一个 ISO 3166-1 Alpha-2 国家/地区代码字符串，例如 cn、us 等。如果没有设置 defaultCountry，那么组件会根据用户的位置自动识别默认的国家/地区。
preferredCountries
preferredCountries 属性用于设置这个输入框的预选国家/地区。这个属性接受一个字符串数组，其中每个字符串都是一个 ISO 3166-1 Alpha-2 国家/地区代码，例如 ['cn', 'us'] 等。如果用户还没有选择国家/地区，那么输入框默认展示的是数组中的第一个国家/地区。
inputProps
inputProps 属性用于设置这个输入框的 HTML 属性。例如，我们可以通过 inputProps 设置 name、id、className、required 等属性。这些属性都会被传递给内部的 <input> 元素。
flagsImagePath
flagsImagePath 属性是一个字符串，用于设置组件内部的国旗图片。这个图片应该包含所有可能出现的国家/地区的国旗图片，在组件内部使用时，会根据选择的国家/地区显示对应的国旗图片。通常，建议将这个图片放在 /public 目录下，并在这个属性中传入其完整路径或相对路径。
示例代码
下面是一个完整的代码示例，展示如何使用 @oledm/react-telephone-input：
-- -------------------- ---- -------
------ ------ - -------- - ---- --------
------ ------------------- ---- -------------------------------
------ -----------------------------------------------------------
-------- ----- -
----- ----------- ------------- - -------------
----- ------------ - ------- -------- -- -
--------------------
--
------ -
---- ----------------
--------------------
-------------------
-------------------------- ------
-------------
----- ------------
--------- -----
--
---------------------------
-----------------------
--
----------------------------
------
--
-
------ ------- ----这个代码示例使用 ReactHooks 的 useState 来保存用户输入的电话号码。当用户在输入框中输入手机号码时会触发 handleChange 回调函数，我们可以在函数体中拿到用户输入的手机号码和选择的国家/地区。然后将手机号码保存到组件的 state 中，最后展示给用户。
结论
本文介绍了如何安装和使用 @oledm/react-telephone-input 这个 npm 包。如果你需要在 React 项目中添加手机号码输入框，希望这篇文章能对你有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005737481e8991b448e967d