Каковы лучшие практики для работы с формами в ReactJS?

Question

В VanilaJ мы берем данные из формы во время onSubmit, используя FormData make request. В документации ReactJ мы видим, что перед отправкой рекомендуется установить данные StateState, которые представил пользователь. После нажатия кнопки отправки мы берем эти данные из состояния и делаем запрос. Так лучше ли работать с формами с помощью React?

Answer 1

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

Многие люди используют redux для хранения состояний своих приложений.

Вы, конечно, можете использовать свой компонент state, но вы также можете использовать redux-form (популярный) или formik (легкий).

Сохранение в state так же просто, как сохранение в object, но тогда может оказаться сложным хранить все в одном месте в вашем React DOM.

Вот почему существует редукция и почему вы должны прочитать, что это такое, это поможет вам получить ответ.

Answer 2

Здесь вы можете сделать то же самое, что и ваш старый подход, но проблема в том, что вы откладываете отправку формы, так как коллекции HTML занимают больше времени, чем просмотр и управление состояниями. Посмотрите на пример:

import React from 'react';

class Login extends React.Component {
  login(event) {
    event.preventDefault();

    const data = {};
    const inputs = event.getElementsByTagName('input');

    for (let input of inputs) data[input.id] = input.value;

    // send `data` to server to test for login

    console.log(data);
  }

  render() {
    return (
      <form onSubmit={this.login}>
        <input id="email" type="email" />
        <input id="password" type="password" />
        <button type="submit">Login</button>
      </form>
    );
  }
}

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

Answer 3

В зависимости от размера вашего проекта, существует множество пакетов, которые легко обрабатывают отправку форм, например: formik, redux-form, react-final-form, если не считать нескольких. Но большинство из них используют одну и ту же технику. Например, formik правильно делает это, а также обрабатывает некоторые крайние случаи для вас, чтобы вам не пришлось беспокоиться.

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