什么是 @marudor/react-maskedinput?
@marudor/react-maskedinput 是一个基于 React 的输入框组件，它支持输入框的格式校验、格式掩码等功能。
如何使用
使用 @marudor/react-maskedinput，你需要在项目中安装它，可以使用 npm 或者 yarn 安装。
$ npm install @marudor/react-maskedinput 或 $ yarn add @marudor/react-maskedinput
安装完成后，在你的项目中引入这个组件。
-- -------------------- ---- -------
------ ----- ---- --------
------ ----------- ---- -----------------------------
----- --- ------- --------------- -
------------------ -
-------------
--------- - ----- ----- ----- - -- ---- ----- ----- ----- ---- - -- ----- ----- ----- ---- ----- ----- ----- ------
---------- - -
------ ---
--
-
------------ - ------- -- -
--------------- ------ ------------------ ---
-
-------- -
------ -
---- ----------------
------------
----------------
------------------------
----------------------------
------------------ ----- -------
--
------
--
-
-
------ ------- ----上面代码中，我们定义了一个电话号码输入框，设置了格式掩码、占位符和 onChange 事件。你可以根据你的需求定义不同的格式掩码。
属性
| 属性 | 说明 | 类型 | 是否必须 |
|---|---|---|---|
| mask | 格式掩码 | array of strings and/or regex | 是 |
| value | 输入框的值 | string | 是 |
| onChange | 输入框改变后的回调函数，接收输入框的值作为参数 | func | 是 |
| placeholder | 输入框没有值时的占位符 | string | 否 |
| disabled | 是否禁用输入框 | bool | 否 |
| readOnly | 是否只读 | bool | 否 |
| className | 自定义样式 class 名称，在组件的样式上添加该 class，可以自定义组件样式 | string | 否 |
示例
下面给出一个更加完整的例子，我们定义了一个日期输入框，它支持年份只能在 1900~2999 年之间，月份只能在 1-12 之间，日期只能在 1-31 之间，并且自动添加斜杠。
-- -------------------- ---- -------
------ ----- ---- --------
------ ----------- ---- -----------------------------
----- --- ------- --------------- -
------------------ -
-------------
--------- - ------ ----- ---- ----- ----- ---- -------- ----- ----- ------
---------- - -
------ ---
--
-
------------ - ------- -- -
----- ----- - -------------------
-- ---------------------------------- -
--------------- ------ -------------- --- ---
- ---- -- ------------- --- -- -
----- ------- ----- ----- - -----------------
----- --------- - ---- -- ---- -- ---- -- -----
----- ---------- - ----- -- - -- ----- -- ---
----- --------- - ---- -- - -- ---- -- ---
----- ---------- - ----- - - --- - -- ---- - --- --- -- -- ---- - --- --- --
-- ------ --- ---- -- ---- - --- -
--------------- ------ ---------------- - ---- - -------------- ---
- ---- -
-- -------- --- ---- -- ----- --- ---- -- ----- --- ---- -- ----- --- ----- -- ---- - --- --
------ --- ---- -- ---- - --- --
------------ -- ---------- -- ------------ -
-------
-
--------------- ----- ---
-
- ---- -
--------------- ----- ---
-
-
-------- -
------ -
---- ----------------
------------
----------------
------------------------
----------------------------
------------------ -----
--
------
--
-
-
------ ------- ----上面代码中，我们通过正则表达式和条件语句实现了对输入框格式的校验，并通过设置输入框的 value 值达到了自动添加斜杠的目的。
结论
在本文中，我们介绍了 @marudor/react-maskedinput 这个 React 输入框组件，它可以帮助我们实现输入框的格式校验和格式掩码等功能，为我们开发高质量的 Web 应用提供了很大的方便。我相信，通过本文的学习，你已经了解了如何使用这个组件，并能够根据自己的需求进行格式掩码和格式校验的设置了。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60066bcb967216659e244686