[英]How to prevent loading blank page after submitting form?
我在提交联系表格后重新加载空白页面时遇到问题。 联系表正在工作,email 正在发送给我,但之后它自己加载了一个空白页面。
我希望它像这样:提交表单 -> 发送消息 -> 清除值 -> 无需重新加载。
所以我知道e.preventDefault()
我尝试使用它但是为此我需要一个额外的函数来传递e
prop。 例如:但我无法将钩子传递到 function。
const handleSubmit (e: any) => {
const [state, handleSubmit] = useForm('xwkjewea');
e.preventDefault()
if (state.succeeded) {
formRef.current.resetFields();
formRef.current.message.success('Wiadomość została wysłana');
}
}
我正在使用 FormSpree 来为我的消息发送提供服务,并且为了正常工作,我需要像下面这样进行操作:
const Contact = () => {
const formRef = useRef<any>();
const captchaRef = useRef<HCaptcha>(null);
const [token, setToken] = useState<string>('');
const [state, handleSubmit] = useForm('formSpree-id');
if (state.succeeded) {
formRef.current.resetFields();
formRef.current.message.success('Sent');
}
const onExpire = () => {
setToken('');
message.warning('Expired');
};
const onError = (err: string) => {
setToken('');
message.error(`${err}`);
};
return (
<Wrapper>
<Title>Contact</Title>
<MessageForm
ref={formRef}
name='nest-messages'
onFinish={handleSubmit}
validateMessages={validateMessages}
>
[...]
您可以在匿名 function 中使用e.preventDefault()
,然后将e
事件传递给handleSubmit
function。
<MessageForm
ref={formRef}
name="nest-messages"
onFinish={(e) => {
e.preventDefault();
handleSubmit(e);
}}
validateMessages={validateMessages}
>
我确实建议将state.succeeded
检查放在useEffect
中,以避免在其他状态更改时清除表单
useEffect(() => {
if (state.succeeded) {
formRef.current.resetFields();
formRef.current.message.success("Sent");
}
}, [state.succeeded]);
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.