Как собрать многопольные данные в React через форму

Если вы хотите собирать данные пользователя через форму из Front с помощью React js, вы можете столкнуться с такой проблемой: как хранить данные в react и затем отправлять их куда-либо, например, на ваш сервер express abckend.

Первое решение — использовать хук useState(). Он не идеален, но может помочь вам в различных ситуациях. Но если вы хотите взять несколько полей, таких как имя, email, дата рождения и так далее, вы создаете мульти-состояние?

Поэтому просто не делайте этого. Лучшее решение — использовать один хук для получения данных пользователя как объекта в react.

**

Как?

**

Посмотрите на этот код:

  const [userAuth, setUserAuth] = useState({
    email: '',
    password: '',
  });

Это поможет вам хранить все. Неважно, хотите вы получить 2 ввода или 10, вам понадобится только один useState().

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

  const handleInput = (e) => {
    const { name, value } = e.target;
    setUserAuth({
      ...userAuth,
      [name]: value,
    });
  };

Осталось только назначить handleInput на вход в качестве события onchange, как здесь:

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