[英]React - Unhandled Rejection (TypeError): e.preventDefault is not a function
I'm getting this error below when I try to implement an Axios post with react-hook-form
:当我尝试使用react-hook-form
实现 Axios 帖子时,出现以下错误:
Unhandled Rejection (TypeError): e.preventDefault is not a function
The problem started occuring when I added onSubmit={handleSubmit(handleSubmitAxios)}
to my <form>
.当我将onSubmit={handleSubmit(handleSubmitAxios)}
添加到我的<form>
时,问题开始出现。 Basically, I want my form to be controlled by react-hook-form
, using my custom handleSubmitAxios
post call that communicates with my backend.基本上,我希望我的表单由react-hook-form
控制,使用与我的后端通信的自定义handleSubmitAxios
后调用。
This is for my sign-in component, currently just testing out the functionality of react-hook-form however the e.preventDefault
message is confusing me.这是我的登录组件,目前只是测试 react-hook-form 的功能,但是e.preventDefault
消息让我感到困惑。
export default function SignIn()
{
const { register, control, errors: fieldsErrors, handleSubmit } = useForm()
const history = useHistory();
const initialFormData = Object.freeze({
email: '',
password: '',
});
const [formData, updateFormData] = useState(initialFormData);
const handleChange = (e) => {
updateFormData({
...formData,
});
};
const dispatch = useDispatch();
const handleSubmitAxios = (e) => {
e.preventDefault();
console.log(formData);
axiosInstance
.post(`auth/token/`, {
grant_type: 'password',
username: formData.email,
password: formData.password,
})
.then((res) => {
console.log(res);
localStorage.setItem('access_token', res.data.access_token);
localStorage.setItem('refresh_token', res.data.refresh_token);
history.push('/');
window.location.reload();
dispatch(login({
name: formData.email,
password: formData.password,
loggedIn: true,
}))
})
};
const classes = useStyles();
return (
<Container component="main" maxWidth="xs">
<CssBaseline />
<div className={classes.paper}>
<Typography component="h1" variant="h5">
Sign in
</Typography>
<form className={classes.form} noValidate onSubmit={handleSubmit(handleSubmitAxios)}>
<FormControl fullWidth variant="outlined">
<Controller
name="email"
as={
<TextField
variant="outlined"
margin="normal"
inputRef={register}
required
fullWidth
id="email"
label="Email Address"
name="email"
autoComplete="email"
autoFocus
onChange={handleChange}
helperText={fieldsErrors.email ? fieldsErrors.email.message : null}
error={fieldsErrors.email}
/>
}
control={control}
defaultValue=""
rules={{
required: 'Required',
pattern: {
value: /^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,4}$/i,
message: 'invalid email address'
}
}}
/>
</FormControl>
<Button
type="submit"
fullWidth
variant="contained"
color="primary"
className={classes.submit}
onClick={handleSubmit}
>
Sign In
</Button>
</form>
</div>
</Container>
);
}
Thank you for any help or guidance on how I can solve the original error!感谢您就如何解决原始错误提供任何帮助或指导!
As per the docs , First parameter is the data or errors
object, second parameter is the form event
.根据文档,第一个参数是data or errors
object,第二个参数是form event
。
((data: Object, e?: Event) => void, (errors: Object, e?: Event) => void) => Function ((数据:Object,e?:事件)=> 无效,(错误:Object,e?:事件)=> 无效)=> Z86408593C34AF77FDD1Z0DF932F8B526
In your case is e
is the data, that's why you're getting e.preventDefault
is not a function error.在您的情况下, e
是数据,这就是您收到e.preventDefault
is not a function 错误的原因。
Try like this像这样试试
const handleSubmitAxios = (data, e) => {
e.preventDefault(); // Actually, you don’t need to call this, Because it’s already called inside react hook form.
console.log(data)
.....
But, The react-hook-form
is already preventing the default form event, Not sure why you wanna do that again.但是, react-hook-form
已经阻止了默认的表单事件,不知道你为什么要再次这样做。 Check this screen shot once and demo too检查此屏幕截图一次并进行演示
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.