如何在React中處理多種形式

Question

我的手風琴有7個步驟。 前6個步驟具有“ Next按鈕，最后一個步驟具有“ Process按鈕。 在手風琴上方有一個Save按鈕。

也可以隨時跳到任何手風琴步驟。

保存按鈕保存所有步驟的表單數據並檢查驗證。 每個步驟的“ 下一步”按鈕都會保存該特定表單數據並檢查驗證。 “處理”按鈕還提交所有步驟的表單數據並檢查驗證。

我已經嘗試過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)));
      }
    });
  }

更新的例子