Redux 表单:具有多个提交按钮的条件表单验证 [英] Redux Form: Conditional form validations with multiple submit buttons

问题描述

我正在使用带有多个提交按钮的 Redux 表单以及 redux-form <Field/>.我需要根据点击这些按钮来控制这些字段的验证.例如.我需要根据单击这些按钮将标志设置为 True/False，以便我可以有条件地验证我的字段，如下所示:

I am using Redux forms with multiple submit buttons along with redux-form <Field />. I need to control the validation of these fields based on click of these buttons. For ex. I need to set a flag to True/False based on click of these buttons so that I can conditionally validate my fields like below:

        <Field
          name="date"
          component={DateFormField}
          validate={isSaveDraft && [validateRequiredText]}
          floatingLabelText="Date"
          fullWidth
          helpText="blablabla"
        />
        <Field
          name="title"
          component={TextFormField}
          normalizeOnBlur={normalizeTextOnBlur}
          validate={!isSaveDraft && [validateRequiredText]}
          floatingLabelText="Project title"
          fullWidth
          helpText="blablabla"
        />

从上面的代码可以看出，我使用 validate={isSaveDraft && 有条件地验证我的字段.[validateRequiredText]} 和 validate={!isSaveDraft &&[validateRequiredText]}

As you can see from above code, I'm conditionally validating my fields with validate={isSaveDraft && [validateRequiredText]} and validate={!isSaveDraft && [validateRequiredText]}

这是我的两个提交按钮:

Here are my two submit buttons:

      <RaisedButton
        label={submitting ? 'Saving Draft...' : 'Save Draft'}
        type="button"
        onClick={handleSubmit(values => onSubmit())}
        disabled={submitting}
        primary
      />
    <RaisedButton
      label={submitting ? 'Submitting Brief...' : 'Submit Brief'}
      type="button"
      onClick={handleSubmit(values => onSubmit())}
      disabled={submitting}
      primary
    />

但是，我无法实现它.请帮忙.

However, I'm not able to achieve it. Please help.

推荐答案

经过多次头痛和头疼之后，我终于找到了解决方案，而不会让事情看起来很丑陋.感谢开发人员提供此解决方案.最初的想法是在单击按钮时设置一个标志并有条件地验证字段.(PS:我正在使用字段级验证).然而，问题是验证是在标志设置之前执行的，因为在所有验证被修复之前 onClick 处理程序不会触发，并且该逻辑深埋在 redux-forms 中(通过使用库不必要地过度复杂化简单事物的好处)).

After a lot of headaches and head scratching, I've finally found the solution without making things look ugly. Thanks to a fellow developer for this solution. Original idea was to set a flag on click of the button and conditionally validate the fields. (PS: I'm using Field Level Validations). However, the issue was that the validations are being executed BEFORE the flag setting as the onClick handler wouldn't fire before all the validations are fixed and that logic is buried deep inside redux-forms (perks of unnecessarily overcomplicating simple things by using a library).

解决办法如下:

提交处理程序

handleSubmit() {
    const { bookingCreate, modalShow, navigateTo } = this.props;
    const { isDraftAction } = this.state; // my flag

    // create record!
    return bookingCreate(isDraftAction)
      .then(responsePayload => {
        ...
      })
      .catch(handleSubmissionError);
 }

isDraftAction 是在两个按钮的 onClick 上调用操作时设置 (in local state) 的标志.

isDraftAction is the flag which is set (in local state) when the action is called on onClick of both buttons.

我的条件字段级验证

    <Field
      name="date"
      component={DateFormField}
      validate={isDraftAction && [validateRequiredText]}
      fullWidth
      helpText="blablabla"
    />
    <Field
      name="title"
      component={TextFormField}
      normalizeOnBlur={normalizeTextOnBlur}
      validate={!isDraftAction && [validateRequiredText]}
      fullWidth
      helpText="blablabla"
    />

我的保存记录和提交记录的 2 个按钮.

  const submit = handleSubmit(values => onSubmit()); // this is redux-form's submit handler which will in-turn call my own submit handler defined above. (That's where the library hides all the logic and makes developer helpless)

  <RaisedButton
    label={submitting && isDraft ? 'Saving Draft...' : 'Save Draft'}
    type="button"
    onClick={() => {
      this.props.dispatchAction({ draftAction: true }).then(() => {
        submit();
      });
    }}
    disabled={submitting}
    primary
  />
  <RaisedButton
    label={submitting && !isDraft ? 'Submitting Brief...' : 'Submit Brief'}
    type="button"
    onClick={() => {
      this.props.dispatchAction({ draftAction: false }).then(() => {
        submit();
      });
    }}
    disabled={submitting}
    primary
  />

dispatchAction() 是我的动作函数，它首先将标志设置为真/假，然后调用 redux-forms 内置提交处理程序.此外，我已经提取了 redux-form 的提交处理程序，因为它只是为了更清晰.

dispatchAction() is my action function which will FIRST set the flag to true/false THEN call redux-forms inbuilt submit handler. Also, I've extracted the redux-form's submit handler as it is above only for more clarity.

dispatchAction()

     dispatchAction={({ draftAction }) =>
        new Promise(resolve => {
          this.setState({ isDraftAction: draftAction }, resolve);
        })
      }

这篇关于Redux 表单:具有多个提交按钮的条件表单验证的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！