如何处理多种形式的反应

时间:2018-05-01 13:05:35

标签: reactjs redux-form

enter image description here

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

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

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

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

  

Sandbox example

1 个答案:

答案 0 :(得分:2)

您可以使用getFormNamesgetFormValuesisValid 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