将第 3 方输入道具集成到 Material UI 的 TextField

Question

我正在使用一个名为 react-payment-inputs 的库来接受信用卡号。该库提供了 input getter 道具，可用于处理信用卡输入。

我可以通过像这样的简单输入来使用 getter 道具方法：<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 link 显示了这个问题。

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

Answer 1

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

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

这是有效的，因为它将 getter 方法发送到包裹在 TextField material 元素中的 input。

将第 3 方输入道具集成到 Material UI 的 TextField

Integrate 3rd party input props to Material UI's TextField

credit-card

input

textfield

reactjs

material-ui