如何在 React 中格式化 AntD 表单输入字段，例如电话号码和 SSN？

Question

我有一个 AntD 表单，其中有一个 Input 字段用于电话号码，另一个用于捕获 SSN。当用户输入电话号码或 SSN 时，我希望字段进行相应的格式化。

例如，在字段中键入的电话号码不是 1234567890，而是应格式化为 (123) 456-7890，最初为 (___) ___-____。同样，在 SSN 字段中，如果用户键入他们的 SSN，例如 123456789，则其格式应为 123-45-6789，最初为 ###-##-####。

我真正在寻找的是在 AntD 中执行此操作的正确方法。所以不一定要修复我正在尝试工作的方法。

我一直在尝试各种方法来解决这个问题，但似乎没有一个对我有用。例如，我尝试过：

1. 使用 onChange 并创建一个 normalizeInput 函数，如 here 所述。
2. 在思考我不应该重新发明轮子并且必须有一个我可以简单利用的 npm 包之后，我尝试安装和使用react-number-format。它以我想要的方式格式化字段和内容，但我丢失了 AntD UI（输入字段不再看起来像 AntD 输入字段）。
3. 尝试使用Form's getFieldsValue and setFieldsValue tags 进行游戏，但速度不快。我可能只是不知道自己在做什么。
4. 尝试使用 AntD 的 InputNumber 函数，而不是当我看到它有一个格式化字段可以解决问题时。但我放弃了这种方法，因为我不想要 InputNumber 小部件附带的向上和向下箭头控件。

目前排名第一的作品但并不完全，我不知道为什么。它使用 onChange 读取当前值，并进行相应的调整，但是有两个问题..

1. previousValue 在第 6、第 8 和第 10 位变为未定义。为什么？您将在下面我的代码框的 console.log 中看到它。
2. UI 的字段从不使用值标签进行设置。为什么？我可以通过console.log看到值正在改变，但会认为setState函数会在onChange中设置状态，因此由于值标签，该字段会显示格式化版本..？

这里是my codesandbox 说明问题（MyForm.js 文件）。

Answer 1

检查这个 https://github.com/antoniopresto/antd-mask-input

是一个制作它的库。 组件是

<MaskedInput mask="11/1111" name="expiry" placeholder="mm/yyyy" onChange={this._onChange}/>

你给道具“掩码”的地方，你可以在哪里制作格式。

在你的情况下是

<MaskedInput mask="(111) 111-1111" name="expiry" placeholder="mm/yyyy" onChange={this._onChange}/>