使用 React Hooks 重置为初始状态 [英] Reset to Initial State with React Hooks
问题描述
我目前正在处理一个注册表单,以下是我的代码片段:
const Signup = () =>{const [username, setUsername] = useState('')const [email, setEmail] = useState('')const [密码,setPassword] = useState('')const [passwordConfirmation, setPasswordConfirmation] = useState('')const clearState = () =>{设置用户名('')设置电子邮件('')设置密码('')setPasswordConfirmation('')}const handleSubmit = signupUser =>e =>{e.preventDefault()signupUser().then(data => {控制台日志(数据)clearState()//<-----------})}返回 }导出默认注册
每个状态用于表单的受控输入.
本质上我想做的是在用户成功注册后,我希望状态回到初始状态并清除字段.
在clearState
中手动将每个状态重新设置为空字符串是非常必要的 我想知道是否有 React 附带的方法或函数可以将状态重置回其初始值?
遗憾的是,没有内置的方法可以将状态设置为其初始值.
您的代码看起来不错,但是如果您想减少所需的功能,您可以将整个表单状态放在单个状态变量对象中并重置为初始对象.
示例
const { useState } = React;函数注册用户(){返回新的承诺(解决 => {设置超时(解决,1000);});}常量初始状态 = {用户名: "",电子邮件: "",密码: "",确认密码: ""};const 注册 = () =>{常量 [{用户名,电子邮件,密码,密码确认},设置状态] = useState(initialState);const clearState = () =>{setState({ ...initialState });};const onChange = e =>{const { name, value } = e.target;setState(prevState => ({ ...prevState, [name]: value }));};const handleSubmit = e =>{e.preventDefault();signupUser().then(clearState);};返回 (<form onSubmit={handleSubmit}><div><标签>用户名:<input value={username} name="username" onChange={onChange}/>标签>
<div><标签>电子邮件:<input value={email} name="email" onChange={onChange}/>标签>
<div><标签>密码:<输入值={密码}名称=密码"类型=密码"onChange={onChange}/>标签>
<div><标签>确认密码:<输入值={密码确认}名称=密码确认"类型=密码"onChange={onChange}/>标签>
<按钮>提交按钮></表单>);};ReactDOM.render(
<script src="https://unpkg.com/react@16/umd/react.development.js"><;/脚本><script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script><div id="root"></div>