Answer the question
In order to leave comments, you need to log in
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>
);
}
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>
)
}
Answer the question
In order to leave comments, you need to log in
Didn't find what you were looking for?
Ask your questionAsk a Question
731 491 924 answers to any question