Javascript 如何使react钩子表单在一个页面中与多个表单一起工作?
我在我的项目中使用react hook表单,我有两个完全独立的表单,但是当我提交其中一个表单时,如果另一个表单中的某些字段是必需的,我无法提交当前表单,请检查,并尝试提交其中一个表单,这些表单应该独立工作,但看起来它们相互依赖Javascript 如何使react钩子表单在一个页面中与多个表单一起工作?,javascript,reactjs,react-hook-form,Javascript,Reactjs,React Hook Form,我在我的项目中使用react hook表单,我有两个完全独立的表单,但是当我提交其中一个表单时,如果另一个表单中的某些字段是必需的,我无法提交当前表单,请检查,并尝试提交其中一个表单,这些表单应该独立工作,但看起来它们相互依赖 有什么帮助吗?欢迎来到StackOverflow@webcoder 这两个窗体使用的是同一个钩子实例。您必须使用不同的名称重新使用 import React from "react"; import ReactDOM from "react-dom"; import {
有什么帮助吗?欢迎来到StackOverflow@webcoder 这两个窗体使用的是同一个钩子实例。您必须使用不同的名称重新使用
import React from "react";
import ReactDOM from "react-dom";
import { useForm } from "react-hook-form";
import "./styles.css";
function App() {
const { register, errors, handleSubmit } = useForm({
mode: "onBlur"
});
const {
register: register2,
errors: errors2,
handleSubmit: handleSubmit2
} = useForm({
mode: "onBlur"
});
const onSubmit = data => {
alert(JSON.stringify(data));
};
const onSubmitEmail = data => {
alert(JSON.stringify(data));
};
return (
<div className="App">
<form key={1} onSubmit={handleSubmit(onSubmit)}>
<div>
<label htmlFor="firstName">First Name</label>
<input
name="firstName"
placeholder="bill"
ref={register({ required: true })}
/>
{errors.firstName && <p>This is required</p>}
</div>
<div>
<label htmlFor="lastName">Last Name</label>
<input
name="lastName"
placeholder="luo"
ref={register({ required: true })}
/>
{errors.lastName && <p>This is required</p>}
</div>
<input type="submit" />
</form>
<form key={2} onSubmit={handleSubmit2(onSubmitEmail)}>
<div>
<label htmlFor="email" placeholder="bluebill1049@hotmail.com">
Email
</label>
<input name="email" ref={register2({ required: true })} />
{errors2.email && <p>This is required</p>}
</div>
<input type="submit" />
</form>
</div>
);
}
const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);
从“React”导入React;
从“react dom”导入react dom;
从“react hook form”导入{useForm};
导入“/styles.css”;
函数App(){
常量{register,errors,handleSubmit}=useForm({
模式:“onBlur”
});
常数{
注册人:注册人2,
错误:错误2,
handleSubmit:handleSubmit2
}=使用形式({
模式:“onBlur”
});
const onSubmit=data=>{
警报(JSON.stringify(数据));
};
const onSubmitEmail=数据=>{
警报(JSON.stringify(数据));
};
返回(
名字
{errors.firstName&&这是必需的}
姓
{errors.lastName&&这是必需的}
电子邮件
{errors2.email&这是必需的}
);
}
const rootElement=document.getElementById(“根”);
render(,rootElement);
快速更新Faizan的答案:在我的情况下,错误
应该与表单状态
一起使用,而不是单独使用。因此,应将属性导入为:
const { formState: { errors } } = useForm();
const { formState: { errors: errors2 } } = useForm();
名字可能会让人困惑,但这就是我得出的解决方案。回答很棒,问候也很亲切。谢谢你,比尔,你可以将评论标记为接受一次,你就可以解决你的问题了。这有助于社区了解有公认答案的帖子。