React + EmailJS在onClick方法中向我发送了大量的电子邮件

Question

我一般是新的web开发，但我试图在我的网站上创建我自己的联系页面，我有麻烦。我正在使用React、Gatsby和Emailjs。我已经设置了表单，以便将输入传递到状态onChange。然后是send message;按钮，应该使用EmailJS使用令牌和状态变量发送电子邮件。这完成了所有工作，电子邮件发送成功但它正在发送数十封邮件。我相信发生的事情是它调用sendEmail每次状态设置和DOM重新渲染，或者基本上每个字符输入到字段一次，但我不知道为什么。

如果你能帮我弄清楚为什么按下发送消息按钮也会把我送到我的网站上的404/#路由，那就加分了。

import React from 'react'
import emailjs from 'emailjs-com
class Main extends React.Component {
constructor(){
super()
this.state = {
fromName:'',
message:'',
fromEmail:''
}
}
render() {
return (
<div ...
>
...
<article>
...
<form method="post" action="#">
<div className="field half first">
<label htmlFor="name">Name</label>
<input type="text" name="name" id="name" value={this.state.fromName} onChange={e => this.setState({fromName: e.target.value})}/>
</div>
<div className="field half">
<label htmlFor="email">Email</label>
<input type="text" name="email" id="email" value={this.state.fromEmail} onChange={e => this.setState({fromEmail: e.target.value})}/>
</div>
<div className="field">
<label htmlFor="message">Message</label>
<textarea name="message" id="message" rows="4" value={this.state.message} onChange={e => this.setState({message: e.target.value})}
placeholder = "..."></textarea>
</div>
<ul className="actions">
<li>
<input type="submit" value="Send Message" className="special" onClick={this.sendEmail()}/>
</li>
</ul>
</form>
</article>
</div>
)
}
sendEmail() {
const serviceId='...'
const templateId='...'
const userId='...'
emailjs.send(serviceId, templateId, this.state, userId)
}
}
export default Main

Answer 1

问题是你从来没有很好地遵循emailjs文档，你从来没有阻止默认的表单操作。根据emailjs文档，你应该在表单的开始标签上设置onClick函数与发送电子邮件函数(不调用它)，而不是在提交按钮上。(但是按钮仍然是必需的，以便它可以发送需要提交表单的标志)。您还调用了sendEmail函数，这是不合适的，会导致问题。在创建sendEmail函数时，还必须将event作为参数添加到该函数中。然后在sendEmail函数中调用event.preventDefault()函数。

import React from 'react'
import emailjs from 'emailjs-com
class Main extends React.Component {
constructor(){
super()
this.state = {
fromName:'',
message:'',
fromEmail:''
}
}
render() {
return (
<div>
<article>
<form method="post" onClick={this.sendEmail} action="#">
<div className="field half first">
<label htmlFor="name">Name</label>
<input type="text" name="name" id="name" value={this.state.fromName} onChange={e => this.setState({fromName: e.target.value})}/>
</div>
<div className="field half">
<label htmlFor="email">Email</label>
<input type="text" name="email" id="email" value={this.state.fromEmail} onChange={e => this.setState({fromEmail: e.target.value})}/>
</div>
<div className="field">
<label htmlFor="message">Message</label>
<textarea name="message" id="message" rows="4" value={this.state.message} onChange={e => this.setState({message: e.target.value})}
placeholder = "..."></textarea>
</div>
<ul className="actions">
<li>
<input type="submit" value="Send Message" className="special"/>
</li>
</ul>
</form>
</article>
</div>
)
}
sendEmail(event) {
event.preventDefault();
const serviceId='...'
const templateId='...'
const userId='...'
emailjs.send(serviceId, templateId, this.state, userId)
.then((result) => {
console.log(result.text);
}, (error) => {
console.log(error.text);
});
}
}
export default Main