使用React Hooks重置为初始状态

小编典典

使用React Hooks重置为初始状态

reactjs

我目前正在使用注册表单，以下是我的代码段：

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是否附带有一种方法或函数可以将状态重置为初始值？

阅读 506

2020-07-22

共1个答案

小编典典

遗憾的是，没有内置的方法可以将状态设置为其初始值。

您的代码看起来不错，但是如果您想减少所需的功能，则可以将整个表单状态放在单个状态变量对象中，然后重置为初始对象。

例

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>

2020-07-22