Приложение большой формы react-redux

Question 1

Я работал над переписыванием одного из модулей в моей компании с помощью react, модуль представляет собой одну страницу, состоящую из 4-5 различных форм, выбор, сделанный в каждой форме, затем определяет внешний вид следующего шага формы.

Есть много «статических» полей ввода, которые не влияют на визуальное состояние пользовательского интерфейса приложения, но требуются для отправки на сервер, другие поля ввода изменяют состояние пользовательского интерфейса.

Я ищу правильный подход для этого типа приложений, поскольку кажется, что он присоединяет событие onChange к каждому входу (всего на всей странице более 100 входов). Я использовал плагин response-redux-forms , но для меня это слишком блокировка, так как мне нужен прямой доступ к состоянию и принятие решения на его основе. Я бы предпочел иметь больший контроль над государством.

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

javascript reactjs

0

Dima Grossman 7 Июл 2016 в 10:42

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

–

Deep

7 Июл 2016 в 10:54

Я разделил всю форму на небольшие части компонентов, мой вопрос больше о том, как уведомить состояние при изменении для каждого доступного поля ввода. Я снова посмотрю на формы реакции-редукции

–

Dima Grossman

7 Июл 2016 в 10:57

Answer

Это легко сделать с помощью redux-form. Поскольку все поддерживается в опоре fields, вы можете сделать что-то вроде этого:

const Form = ({
  fields,
  handleSubmit,
  saveForm
}) => (
  <form onSubmit={handleSubmit(saveForm)}>
    <fieldset>
      <input type="text" {...fields.hasAlternativeDelivery} />
    </fieldset>
    {fields.hasAlternativeDelivery.value === true &&
      <fieldset>
        {/* more fields go here */}
      </fieldset>
    }
  </form>
);

Затем мы условно проверяем определенные поля вот так. Итак, чтобы ответить на ваш вопрос: вы не должны полагаться на события изменения, чтобы скрыть / показать определенные поля, это противоречит самой природе React (React декларативен, то, что вы описываете, является императивным способом действий). Вместо этого выясните, какое состояние (/ props) должно вести к какому пользовательскому интерфейсу.

1

Steven 7 Июл 2016 в 11:17

Question 2

Это легко сделать с помощью redux-form. Поскольку все поддерживается в опоре fields, вы можете сделать что-то вроде этого:

const Form = ({
  fields,
  handleSubmit,
  saveForm
}) => (
  <form onSubmit={handleSubmit(saveForm)}>
    <fieldset>
      <input type="text" {...fields.hasAlternativeDelivery} />
    </fieldset>
    {fields.hasAlternativeDelivery.value === true &&
      <fieldset>
        {/* more fields go here */}
      </fieldset>
    }
  </form>
);

Затем мы условно проверяем определенные поля вот так. Итак, чтобы ответить на ваш вопрос: вы не должны полагаться на события изменения, чтобы скрыть / показать определенные поля, это противоречит самой природе React (React декларативен, то, что вы описываете, является императивным способом действий). Вместо этого выясните, какое состояние (/ props) должно вести к какому пользовательскому интерфейсу.

1

Steven 7 Июл 2016 в 11:17

Приложение большой формы react-redux

1 ответ

Похожие вопросы

Новые вопросы

javascript