gpt4 book ai didi

reactjs - 无法使用 Formik 设置 `isSubmitting`

转载 作者:行者123 更新时间:2023-12-05 06:51:04 27 4
gpt4 key购买 nike

编辑

事实证明,它一直在工作——问题是因为我的 handleLogin方法是 async

新沙箱:

quirky-lichterman-vwhmd?


我有一个基本的表单组件。它通过 setSubmitting作为可用方法之一,它通过了 isSubmitting以及。我想在提交表单时禁用提交按钮,但我遇到了麻烦。

最初,我有一个 <form>元素,我试图设置 setSubmitting(true)在下面的部分:

<form
onSubmit={(credentials) => {
setSubmitting(true); // <--
handleSubmit(credentials);
}}
>

但这没有用。所以我尝试摆脱 <form>和改变<Button>type="button"而不是 submit ,我做到了,

<Button
color="primary"
disabled={isSubmitting}
fullWidth
size="large"
type="button"
variant="contained"
onClick={() => {
setSubmitting(true);
handleLogin(values);
}}
>
Submit
</Button>

但这样做的问题是,为了做到 setSubmitting(false)如果出现错误,我必须这样做,

  onClick={() => {
setSubmitting(true);
handleLogin(values, setSubmitting); // <--
}}

除此之外,我对onSubmit={handleLogin}没用,但如果我删除它,Typescript 会提示。

必须有一种更简单的方法来完成此操作(无需使用 useFormik )。

我可以在这里做什么?

这是组件:

import * as React from "react";
import { Formik } from "formik";

import { Box, Button, TextField } from "@material-ui/core";

const Form = React.memo(() => {
const handleLogin = React.useCallback(async (credentials, setSubmitting) => {
console.log(credentials);
setTimeout(() => {
setSubmitting(false);
}, 2000);
}, []);

return (
<Formik
initialValues={{
email: ""
}}
onSubmit={handleLogin} // removing this line make Typescript complain
>
{({
handleSubmit,
handleChange,
setSubmitting,
isSubmitting,
values
}) => (
<div>
<TextField
fullWidth
label="Email"
margin="normal"
name="email"
onChange={handleChange}
value={values.email}
variant="outlined"
/>
<Box sx={{ my: 2 }}>
<Button
color="primary"
disabled={isSubmitting}
fullWidth
size="large"
type="button"
variant="contained"
onClick={() => {
setSubmitting(true);
handleLogin(values, setSubmitting);
}}
>
Submit
</Button>
</Box>
</div>
)}
</Formik>
);
});

export default Form;

trusting-northcutt-kn6mn?

最佳答案

您忘记将 form 放入您的 Formik 组件中

<Formik>
{...}
<form onSubmit={handleSubmit}>
{...}
<button type="submit" disabled={isSubmitting}>
Submit
</button>
</form>
</Formik>

现在您可以将按钮用作提交

演示:https://stackblitz.com/edit/react-egp1gc?file=src%2FForm.js

关于reactjs - 无法使用 Formik 设置 `isSubmitting`,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/66273837/

27 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com