IMask无法按指定格式格式化值：无需自定义组件的实现方案

问题场景 #

原本通过自定义FormattedInput组件使用IMask可以正常按指定mask格式化数值，但将格式化函数formatValue移到App.js直接调用后，无法实现格式转换。

错误原因 #

调用formatValue时，mask参数未加引号：

formatValue(999-99-9999, "123456789");

这里999-99-9999会被JavaScript解析为数值运算（999 - 99 - 9999 = -9099），而非预期的字符串格式掩码，导致IMask无法识别正确的格式规则。

修正后的代码 #

将mask参数改为字符串形式，同时确保掩码格式符合IMask的要求（用0表示数字占位符更贴合原组件的逻辑）：

import React from 'react';
import { IMask } from 'react-imask';

const formatValue = (mask, value) => {
    const maskedValue = IMask.createMask({ mask });
    maskedValue.resolve(value);
    return maskedValue.value;
};

function App() {
    // mask需传入字符串类型，用0定义数字占位位置
    const formattedValue = formatValue("000-00-0000", "123456789");
    return (
        <div className="App">
            {formattedValue}
        </div>
    );
}

export default App;

修改后即可得到正确的格式化结果：123-45-6789。

内容的提问来源于stack exchange，提问作者Sai