Сброс в исходное состояние с помощью React Hooks - PullRequest
Новая
       9

Сброс в исходное состояние с помощью React Hooks

0 голосов
/ 27 февраля 2019

В настоящее время я работаю над формой регистрации, и ниже приведен фрагмент моего кода: 

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, который сбрасывает состояние до его начальных значений?

Ответы [ 6 ]

0 голосов
/ 12 июня 2019

У меня был похожий вариант использования.Завершение не связано с механизмом входа в систему, регистрации, но я изменил его, чтобы связать с вашим вариантом использования.

На мой взгляд, простой способ решить эту проблему - с помощью родительского компонента. 

const initUser = {
  name: '',
  email: '',
  password: '',
  passwordConfirmation: ''      
}

const LoginManager = () => {
  const [user, setUser] = useState(initUser)

  return <Signup user={user} resetUser={setUser} />
}

const Signup = ({user, resetUser}) => {
    const [username, setUsername] = useState(user.name)
    const [email, setEmail] = useState(user.email)
    const [password, setPassword] = useState(user.password)
    const [passwordConfirmation, setPasswordConfirmation] = useState(user.passwordConfirmation)


    const handleSubmit = signupUser => e => {
        e.preventDefault()
        signupUser().then(data => {
            console.log(data)
            resetUser(initUser) // <-----------
        })
    }

    return <JSX />
}

export default Signup
0 голосов
/ 22 мая 2019

Я полностью согласился с @ ответом Толле.

Если вам нужно запустить некоторые функции после того, как состояние очищено 

const clearState = () => {
  setState({...initialState});
  return {
    foo,
    bar,
    // ...
  };
};

// when component is unmounted

() => clearState().foo();
() => clearState().bar();
0 голосов
/ 27 февраля 2019

Помимо других ответов, я бы порекомендовал подобрать вспомогательную библиотеку , например, , или создать собственную абстракцию поверх хуков, если вы часто будете этим заниматься.

useState и друзья на самом деле просто низкоуровневые примитивы для вас, пользователя, для создания более полезных хуков поверх него.У меня есть проекты, где необработанные useState вызовы на самом деле довольно редки.

0 голосов
/ 27 февраля 2019

К сожалению, нет встроенного способа установить состояние в его начальное значение.

Ваш код выглядит хорошо, но если вы хотите уменьшить необходимые функции, вы можете перевести все состояние формы впеременная одного состояния объекта и сброс к исходному объекту.

Пример 

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>
0 голосов
/ 27 февраля 2019

Вы можете использовать одну переменную состояния, как описано в FAQ здесь: https://reactjs.org/docs/hooks-faq.html#should-i-use-one-or-many-state-variables

Конечно, это зависит от вашего варианта использования.

Повторное получение компонента из родительского контейнера также приведет к сбросуэто автоматически, конечно.

0 голосов
/ 27 февраля 2019

Как я знаю (читая реагирующую документацию) - пока нет способа сделать это.

...