Я пишу здесь свою проблему как часть fre sh.
Я создал многоступенчатую форму, в которой на динамике c заполнена в 1-й форме, это поле предназначено для создания пароля вручную или просто автоматически сгенерирован.
Итак, моя многоступенчатая форма работает нормально, переходить туда и обратно - это нормально, но я должен передать поля в основной компонент, чтобы он мог проверить правильность, и я тоже передаю этот пароль
Вот и проблема
Когда я передаю поле password, проверка проходит даже тогда, когда я нажимаю автоматически сгенерированный пароль
Я передаю такие поля fields: ["uname", "email", "password"], //to support multiple fields form
, поэтому даже не проверяйте, позвольте мне создать пароль, для этого требуется проверка.
Когда я нажимаю, позвольте мне создать пароль и ввести некоторые значения, затем нажмите `` Далее '' и когда я вернусь, поле ввода снова будет скрыто в исходное состояние, я знаю, почему это происходит, потому что, когда я вернусь, он снова принимает исходное состояние.
Мне это надоело На данный момент я пробовал много вещей, но не работал. Ниже мой код
import React, { useState, useEffect } from "react";
import Form1 from "./components/Form1";
import Form2 from "./components/Form2";
import Form3 from "./components/Form3";
import { useForm } from "react-hook-form";
function MainComponent() {
const { register, triggerValidation, errors, getValues } = useForm();
const [defaultValues, setDefaultValues] = useState({});
const forms = [
{
fields: ["uname", "email", "password"], //to support multiple fields form
component: (register, errors, defaultValues) => (
<Form1
register={register}
errors={errors}
defaultValues={defaultValues}
/>
)
},
{
fields: ["lname"],
component: (register, errors, defaultValues) => (
<Form2
register={register}
errors={errors}
defaultValues={defaultValues}
/>
)
},
{
fields: [""],
component: (register, errors, defaultValues) => (
<Form3
register={register}
errors={errors}
defaultValues={defaultValues}
/>
)
}
];
const [currentForm, setCurrentForm] = useState(0);
const moveToPrevious = () => {
setDefaultValues(prev => ({ ...prev, ...getValues() }));
triggerValidation(forms[currentForm].fields).then(valid => {
if (valid) setCurrentForm(currentForm - 1);
});
};
const moveToNext = () => {
setDefaultValues(prev => ({ ...prev, ...getValues() }));
triggerValidation(forms[currentForm].fields).then(valid => {
if (valid) setCurrentForm(currentForm + 1);
});
};
const prevButton = currentForm !== 0;
const nextButton = currentForm !== forms.length - 1;
const handleSubmit = e => {
console.log("whole form data - ", JSON.stringify(defaultValues));
};
return (
<div>
<div class="progress">
<div>{currentForm}</div>
</div>
{forms[currentForm].component(
register,
errors,
defaultValues[currentForm]
)}
{prevButton && (
<button
className="btn btn-primary"
type="button"
onClick={moveToPrevious}
>
back
</button>
)}
{nextButton && (
<button className="btn btn-primary" type="button" onClick={moveToNext}>
next
</button>
)}
{currentForm === 2 && (
<button
onClick={handleSubmit}
className="btn btn-primary"
type="submit"
>
Submit
</button>
)}
</div>
);
}
export default MainComponent;
пожалуйста, проверьте мою песочницу кода здесь, вы можете найти полный рабочий код Песочница кода