无法让 formik 验证与 react-router 一起使用

Question

早上好，

我想要一个 react-router 链接仅在表单没有错误时转发，不幸的是，下面的代码在表单被验证之前会转发，因此不会出现错误等等。您能否指导我如何解决此问题，以便验证表单，如果没有错误，链接会进一步转发吗？

这是我的代码：

<Link to={this.props.formikProps.isValid?'mainMenu': 'itemDetail'}>{!this.props.disabled && <button className="buttons-panel__button" type="button" onClick={() => (this.props.handleSubmit(false), this.props.formikProps.isValid? '' : this.onValidationFail())} >Save</button>}</Link>

方法是（基本上只是显示弹窗错误，有效）：

onValidationFail() {
    setAlertMessage("You need to fill all mandatory fields")
}

到目前为止，我取得的最好成绩是它在每种情况下都按预期工作，但如果根本没有触及表单。我尝试了几种不同的方法，包括来自 formik 的 formValidate，但由于某种原因它也不起作用。

我期待有关此案的一些提示/提示/解决方案。

Answer 1

我认为您的解决方案看起来有点过于复杂。也许只是使用简单的表单提交，并在表单提交后将用户重定向到路由。
它看起来像这样：

import { Formik, Form, Field } from 'formik'

class MyForm {
  render() {
    return (
      <Formik
        initialValues={...}
        onSubmit={() => {this.props.history.push('/go-somewhere')}}
      >
        <Form>
          <Field name="firstName" type="text" />
          <button type="submit">Submit</button>
        </Form>
      </Formik>
    )
  }
}