如何在反应中处理多种形式

Question

我有一个有 7 个台阶的手风琴。前 6 步有 Next 按钮，最后一步有 Process 按钮。在手风琴上方有一个 Save 按钮。

也可以随时跳转到任何手风琴步骤。

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

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

Sandbox example

Answer 1

您可以使用 getFormNames、getFormValues 和 isValid selectors 来 select 您的表单状态。

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

如何在反应中处理多种形式

How to handle multiple forms in react

reactjs

redux-form