EmailJS + React Hooks + 'preventDefault' 的问题

Question

我已经与React合作了几个月，我决定尝试构建我的投资组合。在处理它时，我默认使用的是使用EmailJS平台联系的Material UI表单。我相信这很简单，但我已经处理了几个小时，这个问题一直没有找到解决方案。我不知道问题是出在Material UI库的"自定义输入"上，还是与单击事件有关。我的问题是未定义的"e.preventDefault"。这可能很简单，但为了解决它，我想我最终会头晕，比一开始更困惑。谢谢！

这是带有表单验证器的代码：

const [values, setValues] = useState({
name: '',
email: '',
message: '',
});
const handleChange = (name)=> (e) => {
setValues({ ...values, [e.target.id]: e.target.value });
};
const isFormValid = () => {
if (!values.name || !values.email || !values.message) {
return false;}
else {
return true;}
};
const sendEmail =(e) => {
e.preventDefault()
emailjs.sendForm('gmail', 'template_AILAIHUt', e.target, 'user_kPqhCaNpQHv75H92RjVhj')
.then((result) => {
console.log(result.text + 'funciona');
}, (error) => {
console.log(error.text + 'no funciona');
});
}
const handleSubmit = (e) => {
if (!isFormValid()) {
//message of error in the screen, maybe sweet alerts
console.log('falta algo')
}
else{ sendEmail(e)}
};

return (
<div className={classes.section}>
<div className={classes.container}>
<GridContainer justify="center">
<GridItem xs={12} sm={12} md={4}>
<Card>
<form className={classes.form}>
<CardHeader style={{ fontWeight: "fontWeightBold" }} color='primary' className={classes.cardHeader}>
<h4>Let's create something together </h4>
</CardHeader>
<CardBody>
<CustomInput
labelText="Name..."
id="name"
required={true}
formControlProps={{
required: true,
fullWidth: true
}}
inputProps={{ 
required: true,
onChange: handleChange(),
id:'name',
value: values.name,
type: "text",
endAdornment: (
<InputAdornment position="end">
<People className={classes.inputIconsColor} />
</InputAdornment>
)
}}
/>
<CustomInput
labelText="Email..."
id="email"
type='email'
required={true}
onChange={handleChange()}
formControlProps={{
required: true,
fullWidth: true
}}
inputProps={{
required: true,
onChange: handleChange(),
id:'email',
value: values.email,
type: "email",
endAdornment: (
<InputAdornment position="end">
<Email className={classes.inputIconsColor} />
</InputAdornment>
)
}}
/>
<CustomInput
labelText="Be free..."
id="message"
required={true}
formControlProps={{
size: 'large', 
rows: '4',
required: true,
fullWidth: true
}}
inputProps={{
multiline: true,
required: true,
onChange: handleChange(),
id:'message',
value: values.message,
multiline: true,
type: "text",
endAdornment: (
<InputAdornment position="end">
<Icon className={classes.inputIconsColor}>
<SendIcon  className={classes.inputIconsColor}/>
</Icon> 
</InputAdornment>
),
autoComplete: "off"
}}
/>
</CardBody>
<CardFooter className={classes.cardFooter}>
<Button simple color="primary" size="lg" onClick={(e) => handleSubmit()}>
Submit
</Button> 
</CardFooter>
</form>
</Card>
</GridItem>
</GridContainer>
</div>
</div>
);
}

Answer 1

请确保添加您收到的错误或您的代码在什么时候停止工作，以便我们更好地了解错误所在。

我已经在你的代码中看到了一些东西，我会在下面修复它们，并在每个修复的上面写一个大评论，这样你就可以确定我在哪里更改了代码。

const [values, setValues] = useState({
name: '',
email: '',
message: '',
});
const handleChange = (name)=> (e) => {
setValues({ ...values, [e.target.id]: e.target.value });
};
const isFormValid = () => {
if (!values.name || !values.email || !values.message) {
return false;}
else {
return true;}
};
const sendEmail = (e) => {
emailjs.sendForm('gmail', 'template_AILAIHUt', e.target, 'user_kPqhCaNpQHv75H92RjVhj')
.then((result) => {
console.log(result.text + 'funciona');
}, (error) => {
console.log(error.text + 'no funciona');
});
}
const handleSubmit = (e) => {
// HERE: you always want to prevent default, so do this first
e.preventDefault()
if (!isFormValid()) {
//message of error in the screen, maybe sweet alerts
console.log('falta algo')
} else{ 
sendEmail(e)
}
};

return (
<div className={classes.section}>
<div className={classes.container}>
<GridContainer justify="center">
<GridItem xs={12} sm={12} md={4}>
<Card>
<!-- HERE: use the FORM submit function and make sure to pass the event down to handleSubmit(e)@ -->
<form className={classes.form} onSubmit={(e) => handleSubmit(e)}>
<CardHeader style={{ fontWeight: "fontWeightBold" }} color='primary' className={classes.cardHeader}>
<h4>Let's create something together </h4>
</CardHeader>
<CardBody>
<CustomInput
labelText="Name..."
id="name"
required={true}
formControlProps={{
required: true,
fullWidth: true
}}
inputProps={{ 
required: true,
onChange: handleChange(),
id:'name',
value: values.name,
type: "text",
endAdornment: (
<InputAdornment position="end">
<People className={classes.inputIconsColor} />
</InputAdornment>
)
}}
/>
<CustomInput
labelText="Email..."
id="email"
type='email'
required={true}
onChange={handleChange()}
formControlProps={{
required: true,
fullWidth: true
}}
inputProps={{
required: true,
onChange: handleChange(),
id:'email',
value: values.email,
type: "email",
endAdornment: (
<InputAdornment position="end">
<Email className={classes.inputIconsColor} />
</InputAdornment>
)
}}
/>
<CustomInput
labelText="Be free..."
id="message"
required={true}
formControlProps={{
size: 'large', 
rows: '4',
required: true,
fullWidth: true
}}
inputProps={{
multiline: true,
required: true,
onChange: handleChange(),
id:'message',
value: values.message,
multiline: true,
type: "text",
endAdornment: (
<InputAdornment position="end">
<Icon className={classes.inputIconsColor}>
<SendIcon  className={classes.inputIconsColor}/>
</Icon> 
</InputAdornment>
),
autoComplete: "off"
}}
/>
</CardBody>
<CardFooter className={classes.cardFooter}>
<input type="submit" value="Submit" />
</CardFooter>
</form>
</Card>
</GridItem>
</GridContainer>
</div>
</div>
);
}

迄今为止最大的收获是，你有点混淆了形式逻辑。表单依赖于输入类型的提交按钮。另外，将onSubmit函数与submit输入元素一起使用。

如果你想使用表单并防止提交时出现默认事件，你必须使用输入类型的提交按钮和表单的onSubmit功能。由于这是一个react应用程序，你根本不依赖表单事件，你也可以采取不同的做法(并保留你的样式按钮(。请参阅本指南，了解如何使用自定义按钮提交表单。

Answer 2

也有同样的问题，通过向表单中添加id并将其传递给emailJS方法来解决。

将表单id添加到emailjs方法：

emailjs
.sendForm(
"service_<id>",
"template_<id>",
"#contact-form",
"user_<id>"
)

然后到表单标签：

id="contact-form"