我目前正在使用注册表单,以下是我的代码段:
const Signup = () => { const [username, setUsername] = useState('') const [email, setEmail] = useState('') const [password, setPassword] = useState('') const [passwordConfirmation, setPasswordConfirmation] = useState('') const clearState = () => { setUsername('') setEmail('') setPassword('') setPasswordConfirmation('') } const handleSubmit = signupUser => e => { e.preventDefault() signupUser().then(data => { console.log(data) clearState() // <----------- }) } return <JSX /> } export default Signup
每个状态都用于表格的受控输入。
本质上,我想做的是在用户成功注册后,希望状态恢复为初始状态,并清除字段。
手动将每个状态设置为空字符串是非常必要的,clearState因为我想知道React是否附带有一种方法或函数可以将状态重置为初始值?
clearState
遗憾的是,没有内置的方法可以将状态设置为其初始值。
您的代码看起来不错,但是如果您想减少所需的功能,则可以将整个表单状态放在单个状态变量对象中,然后重置为初始对象。
例
const { useState } = React; function signupUser() { return new Promise(resolve => { setTimeout(resolve, 1000); }); } const initialState = { username: "", email: "", password: "", passwordConfirmation: "" }; const Signup = () => { const [ { username, email, password, passwordConfirmation }, setState ] = 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); }; return ( <form onSubmit={handleSubmit}> <div> <label> Username: <input value={username} name="username" onChange={onChange} /> </label> </div> <div> <label> Email: <input value={email} name="email" onChange={onChange} /> </label> </div> <div> <label> Password: <input value={password} name="password" type="password" onChange={onChange} /> </label> </div> <div> <label> Confirm Password: <input value={passwordConfirmation} name="passwordConfirmation" type="password" onChange={onChange} /> </label> </div> <button>Submit</button> </form> ); }; ReactDOM.render(<Signup />, document.getElementById("root")); <script src="https://unpkg.com/react@16/umd/react.development.js"></script> <script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script> <div id="root"></div>