React - event.preventDefault()不适用于提交
React - event.preventDefault()不适用于提交
提问于 2020-07-12 22:02:34
我想知道为什么event.preventDefault在我的post请求中不起作用。当我单击保存设置按钮时，页面会重新加载。如果我只是在event.preventDefault()后面加上一个console.log，它就能正常工作，所以我想问题出在我的请求中。这里是代码，任何帮助都是非常感谢的。
import React, { useEffect, useState } from 'react'
import Button from '../shared/formElements/Button';
import { useHttpClient } from '../shared/hooks/http-hook';
import { useForm } from '../shared/hooks/form-hook';
...
...
const Settings = () => {
const { isLoading, error, sendRequest, clearError } = useHttpClient();
const [loadedSettings, setLoadedSettings] = useState();
const [formState, inputHandler] = useForm(
{
hostname:
{
value: '',
isValid: false
},
username:
{
value: '',
isValid: false
},
password:
{
value: '',
isValid: false
},
...
...
const settingsSubmitHandler = async event => {
event.preventDefault()
try {
await sendRequest(
'http://localhost/api/settings/save',
'POST',
JSON.stringify({
hostname: formState.inputs.hostname.value,
username: formState.inputs.username.value,
password: formState.inputs.password.value,
...
...
}),
{
'Content-Type': 'application/json'
}
);
} catch (err) { }
};下面是我的JSX代码：
return (
<React.Fragment>
<ErrorModal error={error} onClear={clearError} />
{isLoading && <LoadingSpinner asOverlay />}
{!isLoading && loadedSettings && (
<form className="settings-form" onSubmit={settingsSubmitHandler}>
<div className="container">
...
...
<div className="col" align="center">
<Button type="submit" disabled={!formState.isValid}>SAVE SETTINGS</Button>
</div>
...回答 2
Stack Overflow用户
回答已采纳
发布于 2020-07-13 05:57:17
问题似乎出在{!isLoading && loadedSettings && (上，现在只要删除!isLoading就行了。
Stack Overflow用户
发布于 2020-07-12 22:11:12
这可能是因为您使用了async函数，而函数体将在下一个刻度中调用。如果从函数定义中删除async，它应该可以工作：
const settingsSubmitHandler = event => {
event.preventDefault()
sendRequest(...).then(()=> {
// some async code here
})
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/62862024
复制相关文章
相似问题
腾讯云开发者
