reactjs - 即使在提交数据后,React hooks 表单也不会重置文本字段
问题描述
即使在将数据提交到服务器后,React hooks 表单也不会重置文本字段。我打过电话setRegister({...initialState});
,但它不在乎,也没有重置字段,有人可以告诉我可能是什么原因吗?
const [formRegister, setRegister] = useState({ _id: "", nomineename: "", email: "", description: "", nominatedby: ""});
const onChange = (e) => {
e.persist();
setRegister({ ...formRegister, [e.target.name]: e.target.value });
}
const initialState = {
_id:"",
nomineename: "",
email: "",
description: "",
nominatedby: ""
};
const onSubmit = () => {
const fetchData = async () => {
try {
const res = await Axios.post('http://localhost:8000/service/nominateperson', formRegister);
if (res.data) {
console.log("Link token created:" + res.data);
const successMessage = res.data.message;
setHelperText(successMessage);
setRegister({...initialState});
}
} catch (e) {
console.log(e);
history.push('/errorPage');
}
}
fetchData();
}
return (
<div className="App">
<h1>Nominate Person</h1>
<form onSubmit={handleSubmit(onSubmit)} className="linkForm inputForm" >
<div className="inputField" >
<input name="nomineename"
placeholder="nominate a person"
type="text"
{...register('nomineename',{
required: "Nominate a person is required !",
pattern: {
value: /^[a-zA-Z\s]/,
message: "Invalid name !"
}
})
}
onChange={onChange}
/>
</div>
<span className="nominateError"><pre>{errors.nomineename && errors.nomineename.message}</pre></span>
<div className="inputField" >
<input name="email"
placeholder="nominee email"
type="text"
{...register('email',{
required: "Nominee email is required !",
pattern: {
value: /^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,4}$/i,
message: "Invalid email address !"
}
})}
onChange={onChange}
/>
</div>
<span className="nominateError"><pre>{errors.email && errors.email.message}</pre></span>
<div className="inputField" >
<textarea name="description"
placeholder="reason for nomination"
{...register('description',{
required: "Description is required !",
pattern: {
value: /^[a-zA-Z,.!""\s]{10,1000}$/,
message: "Min of 10 or not more than 1000 characters !"
}
})}
onChange={onChange}
/>
</div>
<span className="nominateError"><pre>{errors.description && errors.description.message }</pre></span>
<div className="inputField nominatedby" >
<input name="nominatedby"
placeholder="nominated by"
type="text"
{...register('nominatedby',{
required: "Nominated by is required !",
pattern: {
value: /^[a-zA-Z\s]{2,30}$/,
message: "Invalid name !"
}
})}
onChange={onChange}
/>
</div>
<span className="nominateError"><pre>{errors.nominatedby && errors.nominatedby.message}</pre></span>
<span className="getlinkbutton">
<input type="submit"/>
</span><br></br><br></br>
<label>
<span className="loginValidationText">{helperText}</span>
</label>
</form>
</div>
)
https://codesandbox.io/s/xenodochial-tereshkova-51t97?file=/src/App.js
解决方案
表单状态由您的状态控制,useForm
而不是由您的formRegister
状态控制。
因此,要重置表单字段/状态,您需要使用其reset
API。
const { reset } = useForm();
const onSubmit = () => {
reset(initialState);
const fetchData = async () => {
try {
...
if (res.data) {
...
reset(initialState);
setRegister({ ...initialState });
}
} catch (e) {
...
}
};
fetchData();
};
推荐阅读
- caching - 如何在同一个 JVM 上运行多个 Apache Ignite 节点?
- javascript - 从 JavaScript 中的模块导入模块的正确方法是什么?
- javascript - 如何在 Angular JS 的自定义标签中访问 HTML?
- javascript - JavaScript映射返回对象数组而不是ojbect
- amazon-web-services - CloudFormation 堆栈错误 - GetObject 时发生错误。S3 错误代码:NoSuchKey
- android - Firebase Analytics 显示的数据不准确
- laravel - 得到错误'试图获取非对象的属性'id''即使 dd 函数正确返回
- c# - 工厂设计模式(不同签名)
- python - 无法将一些难以辨认的内容处理为可读
- php - 如何使用 SQL 连接合并表?