尝试将react-hook-form与react-input mask结合使用

Question

我有以下设置。我的面具会出现，但是当我输入它时，它只是跳到行尾，我不太确定我在这里做错了什么。我尝试将所有道具放入父组件中并通过扩展传递它们，但这不起作用。如果有人能给我一个关于首先在哪里调试的想法，我可以提供更多调试，我会这样做。

提前致谢

import React from "react"
import { useForm } from "react-hook-form"
import MaskedInput from "react-input-mask"

const Quote = () => {
  const { register, handleSubmit, watch, errors } = useForm();
  const [tel, setTel] = React.useState("");

  render(
    <MaskedInput
      mask="(780) 000-0000"
      alwaysShowMask
      onChange={(e) => setTel(e.target.value)}
      value={tel}
      name={data.title}
    >
      {(inputProps) => (
        <input
          ref={register({
            required: true,
            pattern: /^[\+]?[(]?[0-9]{3}[)]?[-\s\.]?[0-9]{3}[-\s\.]?[0-9]{4,6}$/im,
          })}
          value={inputProps.tel}
          name={inputProps.name}
          {...inputProps}
        />
      )}
    </MaskedInput>
  );
};

Answer 1

这个解决方案对我有用。您的 package.json 中需要以下包：

"react-hook-form": "^7.34.0",
"@hookform/resolvers": "^2.9.7",
"react-input-mask": "^3.0.0-alpha.2",
"@types/react-input-mask": "^3.0.1",

您可以使用以下命令安装此版本的react-input-mask ...

yarn add react-input-mask@next
yarn add @types/react-input-mask

这是代码：

<InputMask
  // mask options
  mask={"99.999.999/9999-99"}
  alwaysShowMask={false}
  maskPlaceholder=''
  // input options
  type={'text'}
  placeholder="Ex: 00.000.000/0000-00"
  // react hook form register
  {...register("cnpj", { required: true })}
/>

Answer 2

掩码格式错误需要是这样的

mask="(+7 (999) 999-99-99)"