@balex777

Почему в React Hook Form при пошаговой форме, value инпута с первого шага переносится во второй шаг?

Привет вот моя форма

export default function SignupForm() {

    const {register, watch, getValues, trigger, handleSubmit, formState: { errors } } = useForm({
        mode: 'all',
        resolver: yupResolver(schema)

    });
    const dispatch = useDispatch();
    const [submitting, setSubmitting] = useState(false);
    const [formStep, setFormStep] = useState(true);
    const onSubmit = (values) => {
        setSubmitting(true)
        AuthService.signup(values).then((result) => {
          setSubmitting(false);
          if (!AuthService.isAccessTokenExpired()) {
            dispatch({ type: 'user/signedIn', payload: AuthService.getUser() });
          }
            console.log(result);
        });
        console.log(values);
    };

    return (
        <section className='flex max-w-x'>
            <form onSubmit={handleSubmit(onSubmit)} className='mx-auto my-0 w-2/5'>
                {formStep ? (
                    <div>
                        <Input
                            label="Email"
                            name='email'
                            register = {register}
                            errors={errors}
                            required
                        />
                        <Input
                            label="Пароль"
                            type='password'
                            name='password'
                            register = {register}
                            errors={errors}
                            required
                        />
                        <Input
                            label="Подтвержение пароля"
                            type='password'
                            name='passwordRepeat'
                            register = {register}
                            errors={errors}
                            required
                        />

                        <button
                            type="button"
                            className="btn btn--full btn--black btn--large"
                            onClick={async () => {
                                setFormStep(!await trigger(['email', 'password', 'passwordRepeat']));
                            }}
                        >
                            Далее
                        </button>

                    </div>
                ) : (
                    <div>
                        <Input
                            label="Комапния"
                            type='text'
                            name='company'
                            register = {register}
                            errors={errors}
                            required
                        />
                        <button
                            type="button"
                            className="btn btn--full btn--black btn--large"
                            onClick={() => {
                                setFormStep(true);
                            }}
                        >
                            Назад
                        </button>
                        <button
                            type="submit"
                            className="btn btn--full btn--black btn--large"
                            disabled={submitting}
                        >
                            Регистрация
                        </button>
                    </div>
                )}
 
            </form>

        </section>
    );
}


Вот компонент Инпута
export function Input({label, errors, register, name, ...rest }) {
    {console.log(register(name))}
    return (
        <div className={`input-wrapper ${(errors[name]) ? 'has-error' : ''}`}>
            <label>{label}</label>
            <input {...register(name)}  {...rest} />
            <p className='error-block'>{errors[name]?.message}</p>
        </div>
    )
}


Получается такая петрушка, когда я жму наДалее, input во втором шаге заполняется value из inputa email из первого шага
Почему не могу понять
  • Вопрос задан
  • 114 просмотров
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы