Проблема react-hook-form и ref
Есть компонент 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? Как ее решить?
Источник: Stack Overflow на русском