Как взять значения из Формика внутри крючка?
Я использую 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
3 ответа
Вы можете использовать предопределенный useFormikContext()
крючок предоставлен Formik
или вы можете установить ссылку на Formik и использовать его текущее значение для получения Formik
значения формы.
Вы можете получить любую ценность из сумки Formik через useFormikContext()
крючок. Вот так:
const { values } = useFormikContext();
const { mobileNumber } = values;
Вам не нужно использовать 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>
);
};