如何在Formik表单中使用<a>标签实现表单提交？

方案一：通过Formik的render props获取submitForm方法 #

Formik支持render props模式，你可以直接在组件内部解构出官方提供的submitForm方法，绑定到a标签的点击事件上，同时要阻止a标签的默认跳转行为。修改后的完整代码如下：

<Formik
  onSubmit={async (values) => {
    await new Promise((r) => setTimeout(r, 500));
    alert(JSON.stringify(values, null, 2));
  }}
  initialValues={{
    yourName: "",
    yourEmail: "",
    yourTel: "",
    yourMessage: "",
  }}
>
  {({ submitForm }) => ( // 解构获取Formik内置的submitForm方法
    <Form>
      <Field name="yourName" placeholder="Name" />
      <ErrorMessage name="yourName" component="div" />
      <Field name="yourEmail" placeholder="Email" type="email" />
      <ErrorMessage name="yourEmail" component="div" />
      <Field name="yourTel" placeholder="Phone Number" />
      <ErrorMessage name="yourTel" component="div" />
      <Field name="yourMessage" as="textarea" placeholder="Message..." />
      <ErrorMessage name="yourMessage" component="div" />
      <a href="#" onClick={(e) => {
        e.preventDefault(); // 必须阻止a标签默认跳转，避免页面刷新中断提交流程
        submitForm();
      }}>
        Submit
      </a>
    </Form>
  )}
</Formik>

方案二：把按钮伪装成a标签样式（更简洁） #

如果只是需要a标签的视觉效果，没必要硬用a标签。直接用<button type="submit">，再通过CSS改成a标签的样式即可，这样能直接复用Formik默认的提交逻辑：

// 先加CSS样式
<style>
  .submit-as-link {
    background: none;
    border: none;
    color: #0066cc;
    text-decoration: underline;
    cursor: pointer;
    padding: 0;
  }
</style>

// 表单内的提交按钮
<button type="submit" className="submit-as-link">
  Submit
</button>

你之前的方法失效原因 #

• <a type='submit'>：type="submit"是表单控件（button、input）专属属性，a标签不支持这个属性，浏览器不会把它识别为表单提交触发器。
• <a onClick={() => {submitForm()}}>：submitForm是Formik内部方法，必须通过Formik的上下文或render props才能获取，直接全局调用会找不到这个方法。

内容的提问来源于stack exchange，提问作者Tegid Goodman-Jones