如何使用Formik与Axios提交请求？表单数据传参疑问

核心要点 #

Formik会自动跟踪表单输入值，这些值存储在formik.values对象里——这就是你需要传给Axios POST请求的payload。另外，你的表单控件必须和Formik绑定，才能让它正确捕获输入内容，下面是修正后的两种实现方式：

方式一：使用Formik内置的onSubmit（推荐） #

直接把提交逻辑写在Formik的onSubmit属性中，它会自动接收表单值作为参数：

const Form = () => {
  return (
    <Formik
      initialValues={{
        title: "",
        description: "",
      }}
      validationSchema={validate}
      // 在这里定义提交逻辑
      onSubmit={(values) => {
        axios.post("http://127.0.0.1:8000/todo/todos/", values)
          .then(response => {
            console.log("提交成功", response);
            // 可添加提交后的操作，比如重置表单
          })
          .catch(error => {
            console.error("提交失败", error);
          });
      }}
    >
      {(formik) => (
        <StyledForm onSubmit={formik.handleSubmit}>
          <div>
            <div>
              <Input
                name="title"
                type="text"
                // 绑定Formik的状态和处理函数
                value={formik.values.title}
                onChange={formik.handleChange}
                onBlur={formik.handleBlur}
              />
              {/* 显示验证错误（如果有） */}
              {formik.touched.title && formik.errors.title && (
                <span>{formik.errors.title}</span>
              )}
            </div>
            <div>
              <Textarea
                name="description"
                as="textarea"
                value={formik.values.description}
                onChange={formik.handleChange}
                onBlur={formik.handleBlur}
              />
              {formik.touched.description && formik.errors.description && (
                <span>{formik.errors.description}</span>
              )}
            </div>
            <button type="submit">提交</button>
          </div>
        </StyledForm>
      )}
    </Formik>
  );
};

export default Form;

方式二：保留自定义的submitHandler #

如果一定要用自定义提交函数，可以通过Formik的上下文获取表单值：

import { useFormikContext } from 'formik';

const Form = () => {
  // 从Formik上下文获取表单状态
  const { values } = useFormikContext();

  const submitHandler = (e) => {
    e.preventDefault();
    axios.post("http://127.0.0.1:8000/todo/todos/", values)
      .then(response => {
        console.log("提交成功", response);
      })
      .catch(error => {
        console.error("提交失败", error);
      });
  };

  return (
    <Formik
      initialValues={{
        title: "",
        description: "",
      }}
      validationSchema={validate}
    >
      {(formik) => (
        <StyledForm onSubmit={submitHandler}>
          <div>
            <div>
              <Input
                name="title"
                type="text"
                value={formik.values.title}
                onChange={formik.handleChange}
                onBlur={formik.handleBlur}
              />
            </div>
            <div>
              <Textarea
                name="description"
                as="textarea"
                value={formik.values.description}
                onChange={formik.handleChange}
                onBlur={formik.handleBlur}
              />
            </div>
            <button type="submit">提交</button>
          </div>
        </StyledForm>
      )}
    </Formik>
  );
};

export default Form;

关键注意事项 #

• 表单控件必须绑定value、onChange、onBlur到Formik的对应方法，否则Formik无法跟踪输入值，formik.values会一直停留在初始状态。
• formik.values的结构和你定义的initialValues完全一致，直接作为Axios请求体传入即可。

内容的提问来源于stack exchange，提问作者Matin