在 React 前端开发中，处理金额输入的格式化是很常见的需求。react-currency-masked-input 是一个 npm 包，可以方便地实现金额输入框的格式化。本文会详细介绍该 npm 包的使用方法。
安装
可以通过 npm 安装该包：
npm install react-currency-masked-input
使用
使用该组件需要引入两个组件：
-- -------------------- ---- ------- ------ ----------- ---- ------------------ ------ ---------------- ---- ----------------------------------------- ----- ---------- - ------------------ ------- ---- ------- --- -------------------------- ----- ------------------------- ---- ------------- ----- -------------- ---- ------------- -- ------ ---展开代码
接下来，我们就可以在组件中使用 MaskedInput 组件：
-- -------------------- ---- ------- ------------ ----------------- ------------------------ ------------------ ------- ------------- ------- -------------------- ------------------------------ -------------------------- ------------------------ --展开代码
参数
createNumberMask 方法会返回一个对象，该对象包含以下属性：
prefix: 前缀，默认为空。suffix: 后缀，默认为空。includeThousandsSeparator: 是否包含千分位分隔符，默认为true。thousandsSeparatorSymbol: 千分位分隔符的符号，默认为逗号。allowDecimal: 是否允许输入小数，默认为true。decimalSymbol: 小数点符号，默认为点（.）。decimalLimit: 最多可以输入几位小数。
MaskedInput 组件包含以下属性：
mask: 在输入框中输入时的格式化。可以分别输入前缀、数值和后缀。className: 输入框的 CSS 类名。placeholder: 输入框中没有输入内容时的提示文字。guide: 是否显示输入提示。如果true，在输入时会给出提示；如果false，则不提示。id: 输入框的 ID。onChange: 在输入框的内容被更新时触发的方法。onBlur: 当输入框失去焦点时触发的方法。value: 输入框的值。
示例
下面是一个使用 react-currency-masked-input 的示例代码：
-- -------------------- ---- ------- ------ ------ - --------- - ---- -------- ------ - ----------- - ---- ------------------------------ ------ ---------------- ---- ----------------------------------------- ----- ---------- - ------------------ ------- ---- ------- --- -------------------------- ----- ------------------------- ---- ------------- ----- -------------- ---- ------------- -- --- ----- --- ------- --------- - ------------------ - ------------- ---------- - - ------- --- -- ----------------- - ----------------------------- --------------- - --------------------------- - --------------- - --------------- ------- -------------- --- - ------------ - ------------------------------- - -------- - ------ - ------------ ----------------- ------------------------ ------------------ ------- ------------- ----------- ---------------------------- ------------------------ ------------------------- -- -- - - ------ ------- ----展开代码
以上就是使用 react-currency-masked-input 的方法，可以方便地实现金额输入框的格式化。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/5eedb49eb5cbfe1ea0611309
