0

我在我的应用程序中使用 Formik。我需要从 Formik 中获取值并在我的钩子中使用它。

目前我正在使用useRef钩子

以下是我的自定义钩子代码，它需要Formik值

const { doRequest, errors } = useRequest({
    url: "my_url",
    method: "post",
    body: {
      mobileNumber: formikRef.current
        ? formikRef.current.values.mobileNumber
        : "",
      password: formikRef.current ? formikRef.current.values.password : "",
    },
    onSuccess: (response) => {
      console.log("Hi" + response.msg);
      Router.push("/");
    },
    onFailure: (response) => {
      console.log("Hi2" + response.msg);
    },
  });

在正文中，即使我在文本字段中输入值，手机号码和密码也始终为空。我在里面调用doRequest方法onSubmitFormik

我正在使用以下内容询问裁判

 <Formik
            innerRef={formikRef}..

如果我使用useState了我的所有字段将这些值传递给我的自定义钩子会非常容易，但是由于表单和验证较大，我正在使用 Formik

4

3 回答 3

0

useFormikContext()您可以通过挂钩从 Formik 包中获取任何价值。像这样：

const { values } = useFormikContext();
const { mobileNumber } = values;
于 2020-06-24T05:57:08.380 回答
0

您可以使用useFormikContext()提供的预定义钩子，Formik也可以将 ref 设置为 Formik 并使用其当前值来获取Formik表单值。

于 2020-06-24T14:20:55.530 回答
0

你不需要使用innerRef. 您可以简单地使用 formik values。

  • 您的自定义钩子应该返回doRequest接受参数，以便它可以捕获动态值。
  • 以这种方式编写钩子，使其同时满足静态值和动态值。在此处查看已关闭的 github 问题

工作演示

将 formik 传递值编辑到自定义挂钩

代码片段

export default () => {
  const { doRequest, errors } = useRequest({
    url: "my_url",
    method: "post",
    body: {
      mobileNumber: "0000",
      password: "xxxx"
    },
    onSuccess: response => {
      console.log("Hi" + response.msg);
      // Router.push("/");
    },
    onFailure: response => {
      console.log("Hi2" + response.msg);
    }
  });

  const handleSubmit = (values, actions) => {
    alert(JSON.stringify(values, null, 2));
    actions.setSubmitting(false);
    doRequest(values);
  };

  return (
    <div className="col-sm-12">
      <h1>My Form</h1>
      <Formik initialValues={{ mobileNumber: "" }} onSubmit={handleSubmit}>
        {({ errors }) => (
          <Form>
            <Field name="mobileNumber" placeholder="Mobile Number" />
            <Field name="password" placeholder="Password" />
            <div className="messages-wrapper">
              {errors.email && (
                <div className="alert alert-danger">
                  <ErrorMessage name="mobileNumber" />
                </div>
              )}
              {errors.password && (
                <div className="alert alert-danger">
                  <ErrorMessage name="password" />
                </div>
              )}
            </div>
            <button className="btn btn-primary" type="submit">
              Submit
            </button>
          </Form>
        )}
      </Formik>
    </div>
  );
};
于 2020-06-22T04:16:42.463 回答