Проблема react-hook-form и ref

Рейтинг: 0Ответов: 0Опубликовано: 22.02.2023

Есть компонент InputSignin:

 const InputSignin:React.FC<Ip> = ({placeholder, type='text',...rest}) => {
  const [value, setValue]=useState<string>('')
  const [types, setType]=useState<boolean>(false)
  const showUp=()=>{
    if(value.length!==0){
      setType(!types)
    }
    else{
      setType(false)
    }
  }  
  useEffect(() => {
    if(type==='text' ){
      setType(true)
    }
  }, [])
  
  return (
    <div className={styles.wrap}>
      <input  {...rest}  className={styles.input} type={types ? 'text': 'password'} onChange={(e)=>setValue(e.target.value)} placeholder={placeholder} value={value}></input>
      {type==='password' ? (<div className={styles.show} onClick={showUp}>Показать</div>) : (null)}
    </div>
  )
}

Далее он используется как:

<InputSignin {...register('email', {required: 'Заполните поле!', pattern:{value: /^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,}$/i,message:'Почта набрана неверно!'}})} placeholder='Электронная почта'/>

В итоге проблема: forwardRef render functions accept exactly two parameters: props and ref. Did you forget to use the ref parameter? Как ее решить?

Ответы

Ответов пока нет.