我正在处理一个场景,我必须做一个我已经完成的多步骤表单,以及验证部分。我正在使用 react-hook-form
用于验证。
我有多步形式:
auto generated pass
勾选了单选按钮所以在这种情况下我无事可做 let me create a password
所以在这种情况下,将显示一个输入字段,用户将创建密码 问题
在我的最终表格中,我正在做如下验证:
{
fields: ["uname", "email", "password"], //to support multiple fields form
component: (register, errors, defaultValues) => (
<Form1
register={register}
errors={errors}
defaultValues={defaultValues}
/>
)
},
因此,为了验证 uname、电子邮件和密码,我传递了上述值。但是当为自动生成的密码勾选单选按钮时,它仍在处理验证,我点击下一步,由于密码字段,它不会下一步。
如果我将单选按钮检查为
let me create the password
它转到下一个表单,当我点击 back
回来时它要去auto generated password
再次,它没有保持以前的状态。对于其他输入字段,它正在处理以前的值,但不是在单选按钮方案的情况下。My full working code sandbox
最佳答案
答案 1 原因是你fields: ["uname", "email", "password"]
已修复,password
总是要采取验证。
解决方案 需要存储 Form1
的状态在应用程序中,您可以检查 auto generated password
的状态正在从列表中删除密码
应用程序.js
... other code
// need to move state and function form Form to app
const [show_input, setshow_input] = useState(false);
const createInput = () => {
setshow_input(true);
};
const auto_text = () => {
setshow_input(false);
};
const forms = [
{
// validate based on show_input state
fields: show_input ? ["uname", "email", "password"] : ["uname", "email"], //to support multiple fields form
component: (register, errors, defaultValues) => (
<Form1
register={register}
errors={errors}
defaultValues={defaultValues}
auto_text={auto_text}
createInput={createInput}
show_input={show_input}
/>
)
},
{
fields: ["lname"],
component: (register, errors, defaultValues) => (
<Form2
register={register}
errors={errors}
defaultValues={defaultValues}
/>
)
},
{
component: (register, errors, defaultValues) => (
<Form3
register={register}
errors={errors}
defaultValues={defaultValues}
/>
)
}
];
... other code
答案 2 下次去的时候Form1
被卸载所以它的状态被破坏。当您在 App.js 中存储 Form1 的状态时,您也将解决此问题奖励:最好使用camalCase(例如:showInput)而不是下划线(show_input)
关于javascript - 如何使用 react 以多步形式进行验证,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/62869765/