Javascript 使用无效字段触发handleSubmit

所以我用这个例子来尝试构建一个简单的表单来同步验证

这是我的表格：

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>)
}

handleSubmit

函数是一个简单的

console.log

，作为道具传递

现在在示例中，如果字段无效，则似乎不会调用handleSubmit函数。但在我的代码中，每次单击submit按钮时都会调用它。我已经盯着我的代码和示例代码看了很长一段时间，但没有找到导致这种差异的原因。感谢您的帮助

编辑：添加导出功能：

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;
}

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

---

您需要将自定义的

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;
}

---

constdatasetform=（props）=>{
const{handleSubmit，pristine，reset，submiting}=props；
返回(
提交
)
}
导出默认reduxForm({
表格：'同步验证'，
validate:validate2，
警告
})（数据集格式）

---

---

看看这个。

你忘了用reduxForm包装你的表单吗？

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)