React-hook-form的'reset‘工作正常，提交后输入字段仍不为空
React-hook-form的'reset‘工作正常，提交后输入字段仍不为空
提问于 2020-07-23 15:39:16
我试过使用“重置”函数表单react-hook-form，但提交后输入字段不为空。我不知道为什么，我确定我错过了什么，但找不到什么。
下面是我的代码：
const Form = () => {
const [values, setValues] = useState({
email: "",
name: "",
subject: "",
description: "",
});
const { register, handleSubmit, reset, errors } = useForm();
toastr.options = {"positionClass": "toast-top-right","progressBar": true,}
const onSubmit = (values, e) => {
const { email, name, subject, description } = values;
axios.post("http://localhost:8080/sendme", {
email,
name,
subject,
text: description,
});
e.target.reset();
toastr.success('Message was sent successfully!');
};
const handleChange = (e) => {
const { name, value } = e.target;
setValues({
...values,
[name]: value,
});
};
return (
<div>
<form onSubmit={handleSubmit(onSubmit)} noValidate>
<div className="inputField">
<input
className={`${errors.email && "inputError"}`}
name="email"
type="email"
ref={register({ required: true, pattern: /^\S+@\S+$/i })}
placeholder="Your email *"
value={values.email}
onChange={handleChange}
/>
<ErrorMessage error={errors.email} />
</div>
<div className="inputField">
<input
className={`${errors.name && "inputError"}`}
name="name"
type="text"
placeholder="Your name *"
ref={register({ required: true })}
value={values.name}
onChange={handleChange}
/>
<ErrorMessage error={errors.name} />
</div>
<div className="inputField">
<input
className={`${errors.subject && "inputError"}`}
name="subject"
type="text"
placeholder="Subject *"
ref={register({ required: true })}
value={values.subject}
onChange={handleChange}
/>
<ErrorMessage error={errors.subject} />
</div>
<div className="inputField">
<p className="reqTxt"> * = Required</p>
<textarea
className={`${errors.description && "inputError"}`}
name="description"
placeholder="Type your message here *"
ref={register({ required: true, minLength: 15 })}
value={values.description}
onChange={handleChange}
rows="15"
cols="80"
></textarea>
<ErrorMessage error={errors.description} />
</div>
<button className="btn" onClick={reset} type="submit">
Send message
</button>
</form>
</div>
);
};我已经导入了重置，并将其与onClick一起使用，但它似乎不起作用。我该如何解决这个问题呢？
回答 6
Stack Overflow用户
回答已采纳
发布于 2020-07-26 13:07:00
当您使用react-hook-form时，您很可能会跳过使用useState：
https://react-hook-form.com/get-started
下面是get started页面上的一个快速示例：
import React from "react";
import { useForm } from "react-hook-form";
export default function App() {
const { register, handleSubmit, watch, errors } = useForm();
const onSubmit = data => console.log(data);
console.log(watch("example")); // watch input value by passing the name of it
return (
{/* "handleSubmit" will validate your inputs before invoking "onSubmit" */}
<form onSubmit={handleSubmit(onSubmit)}>
{/* register your input into the hook by invoking the "register" function */}
<input name="example" defaultValue="test" ref={register} />
{/* include validation with required or other standard HTML validation rules */}
<input name="exampleRequired" ref={register({ required: true })} />
{/* errors will return when field validation fails */}
{errors.exampleRequired && <span>This field is required</span>}
<input type="submit" />
</form>
);
}Stack Overflow用户
发布于 2020-10-10 05:49:35
无论何时你想要重置你的输入，都要做好逻辑。只需调用reset方法
import React from "react"
import { useForm } from "react-hook-form"
export default function App() {
const { register, handleSubmit, errors, reset } = useForm()
const onSubmit = data => {
console.log(data)
reset()
}
return (
<form onSubmit={handleSubmit(onSubmit)}>
<label htmlFor="firstName">First name</label>
<input
id="firstName"
type="text"
aria-invalid={errors.firstName ? "true" : "false"}
name="firstName"
ref={register({ required: true })}
/>
<input type="submit" />
</form>
)
}为你干杯！
Stack Overflow用户
发布于 2021-03-05 08:55:57
试试这个：
const submit = (data, e)=>{
console.log(data);
e.target.reset();
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/63058021
复制相关文章
相似问题
腾讯云开发者
