React-Creditcard 是一个 React 组件，用于生成信用卡样式的表单。这个组件可以帮助开发者快速创建一个信用卡输入表单，并且可以进行简单的验证。
安装
你可以通过 npm 安装 React-Creditcard：
npm install react-creditcard --save
使用
在你的 React 组件中导入 React-Creditcard：
-- -------------------- ---- -------
------ ----- ---- --------
------ ---------- ---- -------------------
----- ----------- ------- --------------- -
-------- -
------ -
-----
----------- --
------
--
-
-然后，你就可以在你的组件中使用 <CreditCard />。
你可以通过 onChange 方法来获取输入的值：
-- -------------------- ---- -------
------ ----- ---- --------
------ ---------- ---- -------------------
----- ----------- ------- --------------- -
------------ - --- -- -
---------------
-
-------- -
------ -
-----
----------- ---------------------------- --
------
--
-
-Props
number：信用卡号name：持卡人姓名expiry：到期日期cvc：CVCplaceholders：自定义 placeholder（对象类型，可以包含name、number、expiry和cvc）locale：字符串类型，语言设置（默认为en）preview：布尔类型，是否显示预览（默认为false）acceptedCards：数组类型，允许的卡片名称集合，如['visa', 'mastercard']
示例代码
-- -------------------- ---- -------
------ ----- ---- --------
------ ---------- ---- -------------------
----- ----------- ------- --------------- -
----- - -
------- ---
----- ---
------- ---
---- --
-
------------ - --- -- -
--------------- ---------------- -------------- ---
-
------------ - -- -- -
-- ------
-
-------- -
----- - ------- ----- ------- --- - - -----------
------ -
-----
-----------
---------------
-----------
---------------
---------
----------------------------
--------------
----------------------- ------------- --------
--
----- -----------------------------
------ ----------- ------------- ---------------- ---------------------------- --
------ ----------- ----------- ---------------- ---------------------------- --
------ ----------- ------------- ------------------ ---------------------------- --
------ ----------- ---------- ----------------- ---------------------------- --
------- -------------------------
-------
------
--
-
-总结
React-Creditcard 是一个非常实用的 React 组件，可以帮助开发者快速创建信用卡输入表单，并且可以进行简单的验证。在实际项目开发中，如果遇到需要创建信用卡样式表单的需求，不妨试试这个组件。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60055ea281e8991b448dbf8f