如何处理多种形式的反应

Question

我有一个手风琴，有7个步骤。 前6个步骤有Next按钮，最后一步有Process按钮。 以上手风琴有一个Save按钮。

任何时候都可以跳到任何手风琴步骤。

保存按钮会保存所有步骤的表单数据并检查验证。 每个步骤的下一步按钮都会保存该特定表单数据并检查验证。 处理按钮还会提交所有步骤的表单数据并检查验证。

我试过了redux-form。但它仅限于特定步骤。那么保存按钮点击？

  

Sandbox example

Answer 1

您可以使用getFormNames，getFormValues和isValid selectors来选择表单状态。

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)));
      }
    });
  }

  

Updated example