Как обрабатывать несколько форм в реакции

Question

У меня есть гармошка с 7 ступенями. первые 6 шагов имеют кнопку Next, а последний шаг - кнопку Process. и над гармошкой есть кнопка Save.

Также можно в любой момент перейти на любой шаг аккордеона.

Кнопка Сохранить сохраняет данные всех форм шага и проверяет правильность. Кнопка Next * каждого шага сохраняет данные конкретной формы и проверяет правильность. Кнопка Обработка также отправляет все данные форм шага и проверяет проверку.

Я пытался redux-form. но это ограничено определенным шагом. что насчет кнопки сохранения нажатия?

Пример песочницы

Answer 1

Вы можете использовать селекторы getFormNames, getFormValues и isValid для выбора состояния форм.

const mapStateToProps = state => {
  return {
    forms: getFormNames()(state).map(formName => ({
      formName,
      isValid: isValid(formName)(state),
      values: getFormValues(formName)(state),
      errors: getFormSyncErrors(formName)(state)
    }))
  };
};

Отправить функцию:

submit() {
    const { dispatch, forms } = this.props;

    forms.forEach(({ formName, isValid, values, errors }) => {
      if (isValid) {
        console.log(values);
      } else {
        dispatch(touch(formName, ...Object.keys(errors)));
      }
    });
  }

Обновленный пример