如何从钩子内的 Formik 中获取值？

Posted 2023-02-25

【中文标题】如何从钩子内的 Formik 中获取值？

【英文标题】：How to take values from Formik inside a hook?

【发布时间】：2020-06-13 14:02:50

【问题描述】：

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

目前我正在使用useRef hook

以下是我的自定义挂钩代码，它需要 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);
    ,
  );

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

我正在使用以下方法询问裁判

 <Formik
            innerRef=formikRef..

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

【参考方案1】：

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

您的自定义挂钩应返回 doRequest，它接受一个参数，以便它可以捕获动态值。 编写钩子，使其同时满足静态值和动态值。 See the closed github issue here

工作演示

代码 sn-p

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

【讨论】：

但是在正文中我如何传递参数？

@Nudge 你为useRequest 使用哪个模块？ npm 模块可能已经支持您需要的功能，但您始终可以使用 useState 添加本地状态，并在 handleSubmit 之前的 doRequest 中更新它

@MaxGram 我没有使用任何模块。我已经创建了自己的钩子

【参考方案2】：

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

const  values  = useFormikContext();
const  mobileNumber  = values;

【讨论】：

我收到了undefined is not an object (evaluating '_useFormikContext.resetForm')

【参考方案3】：

您可以使用Formik 提供的预定义useFormikContext() 挂钩，或者您可以为Formik 设置一个引用并使用其当前值来获取Formik 表单值。