将第 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>
  );
};

这是显示问题的 sandbox 链接。

该库确实有关于如何与任何 3rd 方 UI 库集成的 documentation。但是，它没有提供 Material UI 示例。 如何将这些外部道具从 TextField 正确转发到内部输入？

解决方法

我使用 TextField 的 inputProps 属性修复了它，如下所示：

<TextField inputProps={getCardNumberProps({}) />

之所以有效，是因为它将 getter 方法发送到包裹在 input 材料元素中的 TextField。