当Formik窗体isSubmitting时,可以通过在按钮上添加一个条件类来实现。可以使用React的条件渲染来实现这个功能。
首先,你需要在按钮的className属性中添加一个基本类,用于按钮的样式。然后,使用Formik的isSubmitting属性来判断是否正在提交表单。如果isSubmitting为true,表示表单正在提交,你可以在按钮的className属性中添加一个额外的类,用于表示正在提交的状态。
以下是一个示例代码:
import { Formik, Form, Field, ErrorMessage } from 'formik';
const MyForm = () => {
return (
<Formik
initialValues={{ name: '' }}
onSubmit={(values, { setSubmitting }) => {
setTimeout(() => {
alert(JSON.stringify(values, null, 2));
setSubmitting(false);
}, 400);
}}
>
{({ isSubmitting }) => (
<Form>
<Field type="text" name="name" />
<ErrorMessage name="name" component="div" />
<button
type="submit"
className={`btn ${isSubmitting ? 'submitting' : ''}`}
disabled={isSubmitting}
>
Submit
</button>
</Form>
)}
</Formik>
);
};
export default MyForm;
在上面的代码中,我们使用了Formik来创建一个简单的表单。当表单提交时,我们使用setTimeout模拟了一个异步请求,并在请求完成后将isSubmitting设置为false。
在按钮的className属性中,我们使用了模板字符串来动态添加类。如果isSubmitting为true,我们添加了一个名为"submitting"的类,用于表示正在提交的状态。你可以根据需要自定义这个类的样式。
这是一个简单的示例,你可以根据自己的需求进行修改和扩展。希望对你有帮助!
领取专属 10元无门槛券
手把手带您无忧上云