使用无效字段触发的 handleSubmit答案

【问题标题】：handleSubmit triggered with invalid field使用无效字段触发的 handleSubmit
【发布时间】：2018-05-22 13:46:16
【问题描述】：

所以我使用this 示例来尝试构建一个同步验证的简单表单。

这是我的表格：

const DatasetForm: React.StatelessComponent = (props: any) => {
    const { handleSubmit, pristine, reset, submitting } = props;
    console.log(props);

    return (<form onSubmit= { handleSubmit }>
            <div>
                <div>
                    <Field
                        name="firstName"
                        component= {renderField}
                        type="text"
                        label="First Name"
                    />
                </div>
                <div>
                    <button type="submit" disabled={submitting}>Submit</button>
                </div>
            </div>
        </form>)
}

我使用的是完全相同的renderField 函数，这是我的验证函数：

const validate = (values: IValues) => {
    let errors: IValues = {
        firstName: ''
    };
    if (!values.firstName) {
        errors.firstName = 'Required';
    }
    else if (values.firstName !== 'aaaaa') {
        errors.firstName = 'Must be aaaaa';
    }
    return errors;
}

handleSubmit 函数是一个简单的console.log，并作为道具传递。

现在，在示例中，如果字段无效，似乎不会调用 handleSubmit 函数。但是在我的代码中，每次单击提交按钮时都会调用它。我盯着我的代码和示例代码看了很长时间，但没有找到可能导致这种差异的原因。任何帮助表示赞赏。

编辑：添加导出功能：

export default reduxForm({
    form: 'simpleForm',
    validate
})(DatasetForm);

【问题讨论】：

你是不是忘了把你的表单用 reduxForm 包裹起来？

标签： javascript reactjs redux redux-form

【解决方案1】：

您需要将您的自定义validate 函数传递给您包装的自定义表单DatasetForm。像这样：

const validate2 = (values) => {
  let errors = {};
  if (!values.firstName) {
    errors.firstName = 'Required';
  }
  else if (values.firstName !== 'aaaaa') {
    errors.firstName = 'Must be aaaaa';
  }
  console.log(errors);
  return errors;
}

const DatasetForm = (props) => {
  const { handleSubmit, pristine, reset, submitting } = props;

  return (<form onSubmit={handleSubmit}>
    <div>
      <div>
        <Field
          name="firstName"
          component={renderField}
          type="text"
          label="First Name"
        />
      </div>
      <div>
        <button type="submit" disabled={submitting}>Submit</button>
      </div>
    </div>
  </form>)
}

export default reduxForm({
  form: 'syncValidation',
  validate: validate2,
  warn
})(DatasetForm)

看看这个working sample。

【讨论】：