Как исправить ошибку Function components cannot be given refs?

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

введите сюда описание изображенияЕсть форма, которую я хочу провалидировать при помощи react hook form. Есть компонент инпута:

import React from 'react';
import styles from '../../styles/Input.module.scss'

const Input = (props) => {
    return (
        <input {...props} className={styles.input} />
    );
};

export default Input;

И есть сам компонент с формой:

const Registration = () => {

    const {
        register, handleSubmit, setError, formState: {
            errors, isValid
        }
    } = useForm({
        defaultValues: {
            email: '',
            password: ''
        },
        mode: 'onChange'
    })

    const onSubmit = async (values) => {
        console.log(123)
        console.log(values)
    }

    console.log(isValid)

    return (
        <div className={styles.Registration}>
            <form className={styles.form} onSubmit={handleSubmit(onSubmit)}>
                <div className={styles.titles}>
                    <Title>Let's get started</Title>
                    <Subtitle>Registration</Subtitle>
                </div>

                <div className={styles.form__item}>
                    <Input
                        {...register('email', {required: 'Enter email'})}
                        type="email"
                        id="email"
                        placeholder="Email"
                    />
                </div>

                <div className={styles.form__item}>
                    <Input
                        {...register('password', {required: 'Enter password'})}
                        type="password"
                        id="password"
                        placeholder="Password"
                    />
                </div>

                <Button type="submit">Create account</Button>

                <div className={styles.caption}>
                    Already have account? <Link to={'/login'}>Login</Link>
                </div>
            </form>
        </div>
    );
};

export default Registration;

При использовании компонента с инпутом валидация работать не хочет, всегда переменная isValid равна false. Есть изменить компонент инпута на простой инпут то все работает нормально. При использовании кастомного инпута, в браузере ошибка:

Function components cannot be given refs. Attempts to access this ref will fail. Did you mean to use React.forwardRef()?

Ответы

▲ 0

Проблема была в самом компоненте инпута. Переделал так:

import React from 'react';
import styles from '../../styles/Input.module.scss'

const Input = ({register, name, rules, ...props}) => {
    return (
        <input
            {...props}
            {...(register && register(name, rules))}
            className={styles.input}
        />
    );
};

export default Input;

Сейчас все работает корректно