@zlodiak

Как записать состояния в объект?

Состояние формы логина контролируется при помощи хука useState. На каждое поле формы повешен обработчик onChange. После ввода пользователя соответствующие значения записываются в объект состояния:

import React, { useState } from 'react';

function Auth(props) {
  const [form, setForm] = useState([{
    login: '',
    password: '',
  }]);

  return (
    <>
      <div className="login-form">
        <input type="text" onChange={ e => { setForm({ login: e.currentTarget.value }) } }/>
        <br/>
        <input type="text" onChange={ e => { setForm({ password: e.currentTarget.value }) } }/>
        <br/>
        <button>auth</button>
        { form.login }--
        { form.password }
      </div>
    </>
  );
}

export default Auth;


Проблема в том, что после заполнения поля login в стейте пропадают значения password. И при заполнеии поля password в стейте пропадают значения login. Это видно на экране:
{ form.login }--
{ form.password }


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

Есть вариант использовать два хука useState, но мне нужен именно один
  • Вопрос задан
  • 123 просмотра
Решения вопроса 2
<input type="text" onChange={e => setForm({ ...form, login: e.target.value })} />
<input type="text" onChange={e => setForm({ ...form, password: e.target.value })} />
Ответ написан
Комментировать
0xD34F
@0xD34F
const [ form, setForm ] = useState({
  login: '',
  password: '',
});

const onChange = ({ target: t }) => setForm({ ...form, [t.name]: t.value });

<input name="login" value={form.login} onChange={onChange} />
<input name="password" value={form.password} onChange={onChange} />
Ответ написан
Комментировать
Пригласить эксперта
Ответы на вопрос 1
kirbi1996
@kirbi1996
Да все верно, ты перезатираешь стэйт, поэтому необходимо использовать спрэд оператор, чтобы сохранять старые значения поля. Как и было указано в ответах выше. От себя могу добавить то что было бы не плохо сразу заюзать библиотеку react-hook-form. Она позволит сократить количество рендеров что хорошо скажется на производительности
Ответ написан
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы