Reactjs 尝试将react钩子窗体与react输入掩码结合使用

我有以下设置。我的面具会出现，但当我输入它时，它只是跳到了行尾，我不太确定我在这里做错了什么。我试着把所有的道具放在父组件中，然后用一个排列传递它们，但没有成功。我可以提供更多的调试，如果有人能告诉我在哪里调试第一，我会这样做

提前谢谢

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

从“React”导入React
从“react hook form”导入{useForm}
从“反应输入掩码”导入掩码输入
常量引号=（）=>{
常量{register，handleSubmit，watch，errors}=useForm（）；
const[tel，settl]=React.useState（“”）；
渲染(
setTel（e.target.value）}
值={tel}
名称={data.title}
>
{（inputProps）=>(
)}
);
};

掩码格式错误，需要这样

mask=“（+7（999）999-99-99）”帮助他人

如果使用非受控输入字段（如本机输入），则可以使用函数屏蔽输入

这不能与受控输入字段一起使用，如（材质UI）

示例@component/input.tsx

import React from 'react'
import { Container, ErrorMessage } from './styles'

interface InputProps {
  label?: string | true
  defaultValue?: string
  name?: string
  type?: string
  mask?: (value: string) => string
  placeholder?: string
  disabled?: boolean
  error?: any
  value?: string
  register?: any
}
const Input: React.FC<InputProps> = ({
  label,
  defaultValue,
  name,
  type,
  mask = (value: string) => value,
  value,
  placeholder,
  disabled,
  error,
  register,
  ...inputProps
}) => {
  return (
    <Container>
      {label && (
        <label htmlFor={name}>
          {(typeof label === 'string' && label) ||
            placeholder ||
            'Preencha este campo'}
        </label>
      )}
      <input
        onChange={e => (e.target.value = `${mask(e.target.value)}`)}
        disabled={disabled}
        ref={register}
        id={name}
        name={name}
        type={type}
        value={value}
        placeholder={placeholder}
        defaultValue={defaultValue}
        {...inputProps}
      />
      {error && <ErrorMessage>{error.message}</ErrorMessage>}
    </Container>
  )
}

export default Input

从“React”导入React
从“./styles”导入{Container，ErrorMessage}
接口输入道具{
标签？：字符串|真
默认值？：字符串
名称？：字符串
类型？：字符串
掩码？：（值：字符串）=>字符串
占位符？：字符串
禁用？：布尔值
错误？：有吗
值？：字符串
注册号？：有吗
}
常量输入：React.FC=({
标签，
默认值，
名称
类型，
掩码=（值：字符串）=>值，
价值
占位符，
残废
错误，
登记
…输入道具
}) => {
返回(
{标签&&(
{（标签类型=='string'&&label）||
占位符||
“Preencha este campo”}
)}
（e.target.value=`${mask（e.target.value）}`）}
disabled={disabled}
ref={register}
id={name}
name={name}
类型={type}
value={value}
占位符={占位符}
defaultValue={defaultValue}
{…inputProps}
/>
{error&&{error.message}
)
}
导出默认输入

用法示例@page/form.tsx

function CPFMask(v: string): string {
  v = v.replace(/\D/g, '')
  v = v.replace(/^(\d{3})(\d)/g, '$1.$2')
  v = v.replace(/^(\d{3})\.(\d{3})(\d)/, '$1.$2.$3')
  v = v.replace(/^(\d{3})\.(\d{3})\.(\d{3})(\d)/, '$1.$2.$3-$4')
  v = v.replace(/^(\d{3})\.(\d{3})\.(\d{3})\/(\d{2})(\d)/, '$1.$2.$3-$4')
  return v.substring(0, 14)
}

...

<Input
      type="text"
      mask={CPFMask}
      placeholder="CPF"
      name="cpf"
      label
      register={register({
        required: {
          value: true,
          message: 'CPF é obrigatório',
        },
        pattern: {
          value: /([0-9]{2}[\.]?[0-9]{3}[\.]?[0-9]{3}[\/]?[0-9]{4}[-]?[0-9]{2})|([0-9]{3}[\.]?[0-9]{3}[\.]?[0-9]{3}[-]?[0-9]{2})/i,
          message: 'CPF inválido',
        },
      })}
      error={errors.cpf}
    />
...

函数CPFMask（v:string）：string{
v=v.替换（/\D/g，“”）
v=v.replace（/^（\d{3}）（\d）/g，'$1.$2'）
v=v.replace（/^（\d{3}）\（\d{3}）（\d）/，“$1.$2.$3”）
v=v.replace（/^（\d{3}）\.（\d{3}）\.（\d{3}）（\d）/，“$1.$2.$3-$4”）
v=v.replace（/^（\d{3}）\.（\d{3}）\.（\d{3}）\/（\d{2}）（\d）/，“$1.$2.$3-$4”）
返回v.substring（0,14）
}
...
...
我猜这两个模块都试图控制相同的
输入，并且相互冲突。这是在这里完成的，这就是我如何试图弄清楚的，这里有一个例子，使用这两个包，当我像这个例子那样做，将组件放在里面时，它说它不是一个函数，不能是一个孩子。天哪，这是我的面具，这不是正确的格式。现在它可以工作了，那么材质UI呢？里面有一个密码箱。