Как взять значения из Формика внутри крючка?

Question

Я использую 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 метод внутри onSubmit из Formik

Я прошу рефери, используя следующие

 <Formik
            innerRef={formikRef}..

Если бы я использовал useState для всех моих полей. Было бы очень легко передать эти значения в мой собственный хук, но из-за большой формы и проверки я использую Formik

Answer 1

Вы можете использовать предопределенный useFormikContext() крючок предоставлен Formik или вы можете установить ссылку на Formik и использовать его текущее значение для получения Formik значения формы.

Answer 2

Вы можете получить любую ценность из сумки Formik через useFormikContext() крючок. Вот так:

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

Answer 3

Вам не нужно использовать innerRef. Вы можете просто использовать формикvalues.

• Ваш кастомный хук должен вернуться doRequest который принимает параметр, чтобы улавливать динамические значения.
• напишите ловушку таким образом, чтобы она обслуживала как статические, так и динамические значения. См. Закрытую проблему на github здесь

рабочая демонстрация

Фрагмент кода

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