如何解决将第 3 方输入道具集成到 Material UI 的 TextField
我正在使用一个名为 react-payment-inputs 的库来接受信用卡号。 该库提供了可用于处理信用卡输入的输入 getter 道具。
我可以通过如下简单的输入来使用 getter prop 方法:<input {...getCardNumberProps()} />
。
但是,在对 TextField
执行相同操作时,我从库中收到错误消息:
Error: Cannot read property 'match' of undefined
在 Object.formatCardNumber
import React from "react";
import { Grid,TextField } from "@material-ui/core";
import { usePaymentInputs } from "react-payment-inputs";
export default () => {
const { getCardNumberProps } = usePaymentInputs();
return (
<Grid item xs={12}>
{/* App blows up,see sandBox for demo */}
<TextField {...getCardNumberProps()} />
{/* If you uncomment then it shows 2 input Boxes but the app doesnt blow up */}
{/* <input {...getCardNumberProps()} /> */}
{/* If you uncomment this,then there is only 1 input Box
but the styling from the library (space after every 4 digits)
is lost */}
{/* <input {...getCardNumberProps()} type="hidden" /> */}
</Grid>
);
};
该库确实有关于如何与任何 3rd 方 UI 库集成的 documentation。但是,它没有提供 Material UI 示例。
如何将这些外部道具从 TextField
正确转发到内部输入?
解决方法
我使用 TextField 的 inputProps 属性修复了它,如下所示:
<TextField inputProps={getCardNumberProps({}) />
之所以有效,是因为它将 getter 方法发送到包裹在 input
材料元素中的 TextField
。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。