EmailJS：仅有时有效答案

【问题标题】：EmailJS: Only works sometimesEmailJS：仅有时有效
【发布时间】：2020-07-10 09:29:56
【问题描述】：

我正在使用 React 和 EmailJS 设计一个联系表单。我的问题是，当我输入自己的姓名、电子邮件、电话或消息值时，电子邮件不起作用。当我单击“发送消息”按钮而没有在姓名、电子邮件、电话或消息中输入任何内容（因此它使用默认值）时，有时它会起作用（通常不是在第一次单击按钮时，而是在第二次单击时）。

我不知道如何解决这个问题，希望得到一些帮助！


export default class Contact extends React.Component {
    constructor(props) {
        super(props);
        this.state = { message: '', name: 'Name', email: 'Email', phone: 'Phone' };
        this.handleChange = this.handleChange.bind(this);
        this.handleSubmit = this.handleSubmit.bind(this);
      }

      handleChange(event) {
        this.setState({
          [event.target.name]: event.target.value
        });
    }

      handleSubmit (event) {
        var template_params = {
            "name": "name_value",
            "message": "message_value",
            "phone": "phone_value",
            "email": "email_value"
         }

         var service_id = "default_service";
         var template_id = <TEMPLATE_ID_FROM_EMAILJS_ACCOUNT>;
         window.emailjs.send(service_id, template_id, template_params).then(res => {
             console.log('MESSAGE SENT', res.status);
             alert("Message Sent!");
         }).catch(e => {
             console.log("There was an error", e);
         }); 
      }

    render() {

        return (
            <section className="page-section" id="contact">
                <div className="container">
                <div className="row">
                    <div className="col-lg-12 text-center">
                    <h2 className="section-heading text-uppercase">Contact Us</h2>
                    <h3 className="section-subheading text-muted">Fill in the form below to contact us through email</h3>
                    </div>
                </div>
                <div className="row">
                    <div className="col-lg-12">
                    <form id="contactForm" name="sentMessage" noValidate="noValidate">
                        <div className="row">
                        <div className="col-md-6">
                            <div className="form-group">
                            <input className="form-control" id="name" name="name" type="text" placeholder="Your Name *" required="required" data-validation-required-message="Please enter your name." onChange={this.handleChange} value={this.state.name}></input>
                            <p className="help-block text-danger"></p>
                            </div>
                            <div className="form-group">
                            <input className="form-control" id="email" name="email" type="email" placeholder="Your Email *" required="required" data-validation-required-message="Please enter your email address." onChange={this.handleChange} value={this.state.email}></input>
                            <p className="help-block text-danger"></p>
                            </div>
                            <div className="form-group">
                            <input className="form-control" id="phone" name="phone" type="tel" placeholder="Your Phone *" required="required" data-validation-required-message="Please enter your phone number." onChange={this.handleChange} value={this.state.phone}></input>
                            <p className="help-block text-danger"></p>
                            </div>
                        </div>
                        <div className="col-md-6">
                            <div className="form-group">
                            <textarea className="form-control" id="message" name="message" placeholder="Your Message *" required="required" data-validation-required-message="Please enter a message." onChange={this.handleChange} value={this.state.message}></textarea>
                            <p className="help-block text-danger"></p>
                            </div>
                        </div>
                        <div className="clearfix"></div>
                        <div className="col-lg-12 text-center">
                            <div id="success"></div>
                            <button id="sendMessageButton" className="btn btn-primary btn-xl text-uppercase" type="submit" onClick={this.handleSubmit}>Send Message</button>
                        </div>
                        </div>
                    </form>
                    </div>
                </div>
                </div>
            </section>
        )
        }
}

【问题讨论】：

是否有任何错误？
不，它只是重置表单，即使我输入控制台日志，它们也不会出现

标签： javascript reactjs email contact-form

【解决方案1】：

对此不确定，但您似乎没有阻止提交的默认行为，因此您的页面会刷新，您的表单是新的，并且您的函数没有被调用。尝试添加

event.preventDefault();

在您的 handleSubmit 函数的开头。

【讨论】：

【解决方案2】：

emailJS template setting image

请点击链接查看EmailJS邮件正文模板图片。

我遇到了类似的问题。您必须设置 emailJS 模板，与您在 JSX 中的输入名称（名称 =“名称”）相同，使用两个或三个花括号。（如附图所示）我似乎有一些文档列出了两个或三个大括号，似乎两种方式都有效，但并非总是如此。（imo emailJS 似乎不一致。）您还必须确保在测试之前“保存”模板设置。

 <input 
            type ="text" 
            className = "form-input"
            name ="name" 
            placeholder="Name"
            onChange ={updateForm} 
            value = {form.name}
        />

【讨论】：