React 中的自定义屏蔽 PhoneField 组件

Question

我需要创建一个支持自定义电话号码掩码并包含国家/地区代码的电话字段组件。您对可以帮助解决此问题的图书馆有什么建议吗？如果您有其他想法，我将不胜感激。

说明：在某些应用程序中，电话输入字段需要根据国家/地区容纳各种电话号码格式，包括国家/地区代码（例如，美国为+1）。支持自定义电话号码掩码的库将允许字段在键入数字时自动格式化数字（例如，[phone]），并且仍然考虑到不同国家/地区的差异。

此功能对于改善用户体验、确保一致性以及有效验证输入的电话号码非常重要。我想知道是否有您推荐的首选库或方法来构建它。

我尝试过使用react-phone-input-2，但我只能屏蔽电话号码，而不能屏蔽国家/地区代码。

Answer 1

使用

react-phone-number-input

应该可以解决屏蔽国家/地区代码的问题。它带有一个默认的国家/地区选择器，您也可以通过定位其 css 来更新这些样式。最小代码应如下所示：-

import PhoneInput from 'react-phone-number-input'

export const Component = () => <PhoneInput defaultCountry="US" onCountryChange={handleCountryChangeFunction} />

您可以参考https://www.npmjs.com/package/react-phone-number-input了解更多信息