ReactJS中使用EmailJS向特定用户发送报价邮件（无需服务端）的实现问题

1. Button组件调用sendEmail的方式问题 #

• 你写的onclick拼写错误，React的事件监听属性为驼峰命名，需要修改为onClick
• 不需要手动传入事件对象e，直接将sendEmail函数作为引用传给onClick即可，React会自动将触发的事件对象作为第一个参数传入处理函数，修正后的Button代码如下：

<Button
  color="primary"
  variant="contained"
  onClick={sendEmail}
>
  Send Quotation
</Button>

修正后这个调用方式是正确的。

2. EmailJS功能异常的修复 #

你当前调用emailjs.sendForm的参数不符合要求，这是功能失效的核心原因：

• sendForm方法的第三个参数要求传入表单DOM节点或者模板参数对象，你直接传入邮箱字符串肯定无法识别
• 如果你没有绑定HTML表单，更推荐使用emailjs.send方法，更适合自定义参数的场景
• 你需要先在EmailJS后台的邮件模板里配置好对应的变量，比如收件人邮箱变量设为to_email、运费变量设为freight等，然后按照以下方式调用：

修正后的sendEmail函数代码：

const {freight, creatorsEmail} = useLocation().state;

function sendEmail(e){
  e.preventDefault()
  // 构造EmailJS模板需要的参数
  const templateParams = {
    to_email: creatorsEmail,
    cost_price: costPrice,
    sell_price: sellPrice,
    freight: freight
  }
  // 用send方法替代sendForm，参数依次为服务ID、模板ID、模板参数、用户ID
  emailjs.send(
    "xxxxx",
    "xxxxxx",
    templateParams,
    "xxxxx"
  ).then((res) => {
    if(res){
      firebase.firestore().collection("Quotations").add({
        costPrice:costPrice,
        sellPrice:sellPrice,
        creatorsEmail:creatorsEmail,
        freight:freight
      }).then((result) => {
        alert("Quotation Sent Successfully")
        window.location.reload()
      }).catch((e) => {
        alert("An Error Occured, Quotation Cannot be Sent")
        console.log(e)
      })
    }
  }).catch((e) => {
    alert("There was a problem")
    console.log(e)
  })
}

3. 无服务端方案说明 #

你当前选用的EmailJS+Firebase的组合本身就是完全无服务端的方案，只要按照上述修正参数即可正常使用，不需要额外搭建后端服务。

内容的提问来源于stack exchange，提问作者motionless570