reactjs 无法在React中对子组件使用react-input-mask

4dbbbstv 于 2023-06-29 发布在 React

关注(0)|答案(7)|浏览(94)

我想屏蔽一个Material UI TextField，并在互联网上阅读一些解决方案，我得到了以下代码：

<InputMask
          mask="(0)999 999 99 99"
          value={phone}
          disabled={false}
          onChange={handleChange}
        >
          {(inputProps: Props & TextFieldProps) => (
            <TextField
              {...inputProps}
              type="tel"
              label={t("addDriverModal.phone")}
            />
          )}
        </InputMask>

但它让我犯了这个错误：

No overload matches this call.
  Overload 1 of 2, '(props: Props | Readonly<Props>): ReactInputMask', gave the following error.
    Type '(inputProps: Props & TextFieldProps) => JSX.Element' is not assignable to type 'ReactNode'.
  Overload 2 of 2, '(props: Props, context: any): ReactInputMask', gave the following error.
    Type '(inputProps: Props & TextFieldProps) => JSX.Element' is not assignable to type 'ReactNode'.ts(2769)

因此，我不能将TextField作为InputMask组件的子级传递。
我也尝试了这个解决方案：

<InputMask
          mask="(0)999 999 99 99"
          value={phone}
          disabled={false}
          onChange={handleChange}
        >
          <TextField
            id="outlined-basic"
            label="Teléfono"
            variant="outlined"
            style={{
              border: "2px solid #fff",
              borderRadius: "4px",
              color: "white",
            }}
            InputLabelProps={{ style: { color: "white" } }}
            sx={{ input: { color: "white" } }}
          />
        </InputMask>

但当我启动应用程序时，在控制台显示此错误：

Uncaught Invariant Violation: react-input-mask: children must be a function

所以我真的不能使用任何解决方案来屏蔽我的MUI文本字段。我使用这个版本：

"react": "^18.1.0",
   "react-dom": "^18.1.0",
   "react-input-mask": "^2.0.4",
   "@types/react": "^18.0.0",
   "@types/react-dom": "^18.0.0",
   "@types/react-input-mask": "^3.0.1",

我使用Typescript和函数组件。

reactjs

来源：https://stackoverflow.com/questions/72114032/cannot-use-react-input-mask-with-a-children-component-in-react

7条答案

按热度按时间

0g0grzrc1#

您正在使用的类型定义包与包的版本不对应。您应该：

将@types/react-input-mask降级为2.0.4以匹配软件包
或者将react-input-mask升级到3.0.0-alpha.2版本以匹配键入。

赞(0）回复(0）举报 2023-06-29

py49o6xq2#

我遇到了同样的问题，将react-input-mask升级到3.0.0-alpha.2版本解决了这个问题。

赞(0）回复(0）举报 2023-06-29

qcuzuvrc3#

对于react的v16，下面的react-input-mask配置可以正常工作。

"@types/react-input-mask": "2.0.4",
"react-input-mask": "^2.0.4"

升级react到v18后，您还需要升级react-input-mask的版本，这应该可以修复此错误。

"@types/react-input-mask": "3.0.2",
"react-input-mask": "3.0.0-alpha.2"

赞(0）回复(0）举报 2023-06-29

uplii1fm4#

我有同样的问题，它对我的工作更新react-input-mask到版本3.0.0-alpha.2。
最后是我的代码：

<FormControl fullWidth={false} sx={{ width: '290px', mb: 6 }}>
        <Controller
          name='cnpj'
          control={control}
          render={(props) => (
            <InputMask
              mask="99.999.999/9999-99"
              value={props.field.value}
              disabled={false}
              onChange={(value): void => {
                props.field.onChange(value)
                changeHandler(value)
              }}
            >
              <TextField
                disabled={false}
                name="cnpj"
                type="text"
                label='Cnpj'
                placeholder='(e.g.: 60.133.365/0001-16)'
                error={Boolean(errors.cnpj)} 
              />
            </InputMask>
          )}
        />
        {errors.cnpj && <FormHelperText sx={{ color: 'error.main' }}>{errors.cnpj.message}</FormHelperText>}
      </FormControl>

赞(0）回复(0）举报 2023-06-29

gfttwv5a5#

在gitHub上的示例中添加@ts-ignore相同的问题https://stackblitz.com/edit/react-ts-u5u2rb?file=TextFieldMask.tsx

赞(0）回复(0）举报 2023-06-29

myzjeezk6#

仔细检查你作为子元素传入的内容，我得到了这个错误，结果发现我只是引用了Formik上不存在的属性。

赞(0）回复(0）举报 2023-06-29

e7arh2l67#

@PetePearl在GitHub问题队列上提供了一个解决方案，使用Omit来替换children的类型：

import InputMask, { Props as InputMaskProps } from 'react-input-mask';

type TInputMaskCorrect = Omit<InputMaskProps, 'children'> & { children?: (inputProps: any) => JSX.Element };
const InputMaskCorrect: React.FC<TInputMaskCorrect> = ({ children, ...props }) => {
  const child = children as ReactNode;
  return (
    <InputMask {...props}>
      {children}
    </InputMask>
  );
}

然后使用<InputMaskCorrect>代替<InputMask>。
或者，您也可以升级到react-input-mask@3.0.0-alpha.2，但该软件包在过去3年中没有更新。YMMV，问题队列注解中的详细信息。

赞(0）回复(0）举报 2023-06-29

我来回答

reactjs 无法在React中对子组件使用react-input-mask

7条答案

相关问题

热门标签

最新问答