logo标签列表

如何使用ReactJS和SendGrid发送电子邮件？

node.jsreactjssendgridsendgrid-api-v3
4

我已经在SendGrid上设置了一个账户。我已获得API密钥和Node.js方法。我正在使用React js创建一个Web应用程序，希望通过SendGrid发送电子邮件。但是我无法找到任何解决方案。请用示例来回答我的问题。

我猜你是指SendGrid？ - Dominic
2
React只是一个视图库（前端），您需要设置后端（服务器）。这是一个带有Node.js示例的库：https://github.com/sendgrid/sendgrid-nodejs - SakoBu
4个回答
4

使用React是不可能的，因为它是一个前端库，如果您尝试使用React实现，您将会遇到以下错误：

---> 拒绝设置不安全的标头 "User-Agent"

如果您需要设置这些标头，则需要从您的服务器而不是访问者的浏览器发起请求。

因此，从React中无法实现该功能，您需要使用一些后端或Firebase来实现。

有许多库声称支持从客户端发送邮件。基本上，如果您设置no-cors，则可以毫无问题地发送邮件。您将不会遇到在将no-cors设置为其他REST请求时遇到的问题。 - Hardik
1
你可以使用MailJS，并使用sendgrid进行交易服务。 它很容易使用。
非常好的推荐!! @Anroche - James
1
0
//Form.js
class Form extends React.Component {
  constructor() {
    super();
    this.handleSubmit = this.handleSubmit.bind(this);
  }

  handleSubmit(event) {
    event.preventDefault();
    const data = new FormData(event.target);

    fetch('/api/form-submit-url', {
      method: 'POST',
      body: data,
    });
  }

  render() {
    return (
      <form onSubmit={this.handleSubmit}>
        <label htmlFor="username">Enter username</label>
        <input id="username" name="username" type="text" />

        <label htmlFor="email">Enter your email</label>
        <input id="email" name="email" type="email" />

        <label htmlFor="birthdate">Enter your birth date</label>
        <input id="birthdate" name="birthdate" type="text" />

        <button>Send data!</button>
      </form>
    );
  }
}
//index.js

    const sgMail = require('@sendgrid/mail');
    sgMail.setApiKey(process.env.SENDGRID_API_KEY);
    const msg = {
      to: test@example.com',
      from: 'test@example.com',
      subject: 'Sending with SendGrid is Fun',
      text: 'and easy to do anywhere, even with Node.js',
      html: '<strong>and easy to do anywhere, even with Node.js</strong>',
    };

sgMail.send(msg);
你的回答很好，我建议添加更多信息，例如如何将表单数据发送到电子邮件。 - Mr Coder
他问是否可以通过ReactJS发送电子邮件。虽然您已经使用ReactJS编写了代码，但实际上它只能在nodejs中运行，而不能在React中运行。https://docs.sendgrid.com/for-developers - ismail baig
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接