为什么验证不是运行 onSubmit 的 Redux 形式？

Question

我有下面的 react redux-form 来为用户提供一个表单来输入一个或多个电子邮件。

出于某种原因，验证未运行 onSubmit。我添加了一个控制台日志，仅在页面加载时看到验证函数运行。

我做错了什么导致验证不运行 onSubmit？

import React from 'react';
import {Field, FieldArray, reduxForm} from 'redux-form'

let renderEmailField = ({input, label, type, meta: {touched, error}}) =>
  <fieldset>
    <label>{label}</label>
    <div>
      <input {...input} name="email" type="text" className="form-control" />
      {touched && error && <span>{error}</span>}
    </div>
  </fieldset>

let renderEmails = ({fields, meta: {submitFailed, error}}) =>
    <div>

    {fields.map((email, index) =>
      <div className="row form-group" key={index}>

        <div className="col-6">
          <Field
            name={email}
            component={renderEmailField}
            label={`Email Address`}
          />
        </div>
        <div className="col">
          {index > 2 &&
            <a href onClick={(e) => {e.preventDefault(); fields.remove(index)}}>X</a>
          }
        </div>
        <div className="col">
          {submitFailed && error &&
            <span className="error">{error}</span>
          }
        </div>

      </div>
      )}

      <div className="row form-group">
        <div className="col">
          <p>
            <a href onClick={(e) => {e.preventDefault(); fields.push()}}>Add Email</a>
          </p>
        </div>
      </div>

    </div>

class RaterInviteForm extends React.Component {

  handleSubmit(data) {
    // stuff
  }

  render() {

    const { submitting } = this.props
    return (
      <div className="RaterInviteForm">
        <h1>Invites</h1>
        <form className="form" onSubmit={this.props.handleSubmit(this.handleSubmit.bind(this))}>
          <FieldArray name="emails" component={renderEmails} />
          <div className="form-group">
            <button type="submit" disabled={submitting} className="btn btn-primary">Send Invitations</button>
          </div>
        </form>
      </div>
    );
  }

}

const validate = values => {
  const errors = {}
  console.log('validate')
  if (!values.emails || !values.emails.length) {
    errors.emails = {_error: 'At least one email must be entered'}
  }
  else {
    let emailsArrayErrors = []
    if (emailsArrayErrors.length) {
      errors.emails = emailsArrayErrors
    }
  }
  return errors
}

RaterInviteForm = reduxForm({
  form: 'emailsForm',
  initialValues: {
    emails: ['', '', '']
  },
  validate
})(RaterInviteForm)
...

Answer 1

Redux Form docs/example 显示它应该像下面的例子那样完成。

您应该将 submit 验证函数传递给 this.props.handleSubmit()，如 onSubmit={this.props.handleSubmit(validate)}.

class RaterInviteForm extends React.Component {

  render() {

    const { submitting } = this.props
    return (
      <div className="RaterInviteForm">
        <h1>Invites</h1>
        <form className="form" onSubmit=    {this.props.handleSubmit(validate)}>
          <FieldArray name="emails" component={renderEmails} />
          <div className="form-group">
            <button type="submit" disabled={submitting} className="btn btn-primary">Send Invitations</button>
          </div>
        </form>
      </div>
    );
  }

}

const validate = values => {
  const errors = {}
  console.log('validate')
  if (!values.emails || !values.emails.length) {
    errors.emails = {_error: 'At least one email must be entered'}
  }
  else {
    let emailsArrayErrors = []
    if (emailsArrayErrors.length) {
      errors.emails = emailsArrayErrors
    }
  }
  return errors
}

RaterInviteForm = reduxForm({
  form: 'emailsForm',
  initialValues: {
    emails: ['', '', '']
  }
})(RaterInviteForm)
...

Answer 2

默认情况下，模糊事件的验证是运行。

而且，默认情况下 submitFailed (redux form props) 设置为 False 。此道具只有在验证通过后才为真，然后您可以提交表单。

所以你可以使用 onHandleSubmit 期望函数作为参数。示例

onSubmit={handleSubmit(validate)}

或者您可以将其添加到

RaterInviteForm = reduxForm({
  form: 'emailsForm',
touchOnBlur : false 
  initialValues: {
    emails: ['', '', '']
  },
  validate
})(RaterInviteForm)

它的作用是，它仅在您提交表单时验证表单。

为什么验证不是运行 onSubmit 的 Redux 形式？

Why is validation not being run onSubmit in Redux-form?

reactjs

redux-form

react-redux

react-redux-form

为什么验证不是 运行 onSubmit 的 Redux 形式？

Why is validation not being run onSubmit in Redux-form?

reactjs

redux-form

react-redux

react-redux-form

为什么验证不是运行 onSubmit 的 Redux 形式？