在handleSubmit中使用Formik中的promise来更改React状态以显示/隐藏div的方法如下:
import { Formik } from 'formik';
const [showDiv, setShowDiv] = useState(false);
const handleSubmit = async (values, { setSubmitting }) => {
try {
// 执行异步操作,比如发送请求或处理数据
await new Promise((resolve, reject) => {
// 异步操作的代码
// 可以使用axios发送请求或其他方法
// resolve表示操作成功,reject表示操作失败
});
// 操作成功后,更改状态变量以显示div
setShowDiv(true);
} catch (error) {
// 操作失败时的处理
} finally {
setSubmitting(false);
}
};
<Formik
initialValues={initialValues}
validationSchema={validationSchema}
onSubmit={handleSubmit}
>
{({ handleSubmit, isSubmitting }) => (
<form onSubmit={handleSubmit}>
{/* 表单字段 */}
{/* ... */}
<button type="submit" disabled={isSubmitting}>
Submit
</button>
</form>
)}
</Formik>
{showDiv && <div>这是要显示的div</div>}
这样,当表单提交时,Formik会调用handleSubmit函数,并在异步操作完成后更改状态变量,从而显示div。
领取专属 10元无门槛券
手把手带您无忧上云