B
B
balex7772021-05-12 11:08:45
JavaScript
balex777, 2021-05-12 11:08:45

Why in React Hook Form when stepping form, the value of the input from the first step is transferred to the second step?

hello here is my form

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


Here is the input component
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>
    )
}


It turns out such parsley, when I click on Next, the input in the second step is filled with the value from the inputa email from the first step
Why I can’t understand

Answer the question

In order to leave comments, you need to log in

Didn't find what you were looking for?

Ask your question

Ask a Question

731 491 924 answers to any question