反应联系表格问题电子邮件js答案

【问题标题】：React contact form issues email js反应联系表格问题电子邮件js
【发布时间】：2021-05-02 18:15:38
【问题描述】：

const [name, setName] = useState('');
const [email, setEmail] = useState('');
const [number, setNumber] = useState('');
const [message, setMessage] = useState('');



const service_id = 'xxxxx'
const template_id = 'xxxxx'
const user_id = 'xxxxx'
const orderDetails = {

    name: name,
    email: email,
    phone: number,
    message: message
}




const sendEmail = () => {
    emailjs.send(service_id, template_id, orderDetails, user_id);
}

 

 <form className="contactusinfo__form" >
                        <input type="text" placeholder='Your Name' required onChange={(e) => setName(e.target.value)} />
                        <input type="email" placeholder='Your E-mail' required onChange={(e) => setEmail(e.target.value)} />
                        <input type="number" placeholder='Your Number' required onChange={(e) => setNumber(e.target.value)} />
                        <textarea name="message" placeholder='Your Message' id="" cols="30" rows="5" required onChange={(e) => setMessage(e.target.value)} ></textarea>
                        <button style={{ fontSize: '16px', fontFamily: 'Lato' }} type='submit' onClick={sendEmail()}>
                            SEND
                        </button>
                    </form>

我正在尝试使用 emailjs 从联系表单发送电子邮件并遇到错误。我之前它工作得很好，但现在我不知道我改变了什么。我的问题是电子邮件与文本区域中的事件更改量同步。

处理我的联系表单的最佳做法是什么？

【问题讨论】：

嘿伙计，给自己找一个关于 Formik 的好教程。它是每个人在 React 中使用的，稍微复杂一些，但会为您处理所有表单。

标签： javascript html reactjs email state-management

【解决方案1】：

删除按钮上的 onClick 道具并在表单上添加 onSubmit 道具以触发 sendEmail 功能，或删除表单。如果您想处理单击按钮以发送电子邮件，则应将 onClick={sendEmail()} 替换为 onClick={sendEmail}

e.preventDefault() 是防止表单提交（在您的情况下重新加载页面）所必需的。

【讨论】：