从React运行Node.js脚本以发送电子邮件

Question

我是这个问题的新手，也是Node.js的新手，所以我现在面对的是典型的情况。

我在React.js中有一个非常简单的表单，当用户按下“提交”按钮时，我需要使用表单值将其连接到Node文件，然后将其发送到我的电子邮件中。 我不确定如何根据要求连接React和Node。 发送值并将其导入Node。

这是我的反应副代码：

import React, { Component } from 'react';

class Form extends Component {

    constructor(props) {
        super(props);
        this.state = {
            backgroundColor: '#ffffff',
            color: '#000000',
            nameValue: '',
            emailValue: '',
            textareaValue: '',
        };
    }

    handleName(e) {
        this.setState({ nameValue: e.target.value });
    }

    handleEmail(e) {
        this.setState({ emailValue: e.target.value });
    }

    handleTextarea(e) {
        this.setState({ textareaValue: e.target.value });
    }

    handleSubmit(e) {
        e.preventDefault();
    }

    handldeHoverOn() {
        this.setState({ 
            backgroundColor: '#c91010',
            color: '#ffffff' 
        });
    }

    handleHoverOut() {
        this.setState({ 
            backgroundColor: '#ffffff',
            color: '#000000'
         });
    }

    render() {
        const styles = {
            formStyle: {
                margin: '2rem 0',
                display: 'flex',
                justifyContent: 'center',
                flexDirection: 'column',
                alignItems: 'center'
            },
            containerStyle: {
                width: '80%',
                display: 'flex',
                justifyContent: 'center'
            },
            nameStyle: {
                width: '100%',
                height: '2rem',

            },
            emailStyle: {
                width: '100%',
                height: '2rem',
                marginLeft: '2rem',
            },
            textareaStyle: {
                margin: '2rem 0',
                width: '80%',
                height: '5rem',
                boxSizing: 'border-box',
            },
            submitStyle: {
                backgroundColor: this.state.backgroundColor,
                width: '10rem',
                height: '2rem',
                border: '0.5px solid grey',
                borderRadius: '5px',
                textTransform: 'uppercase',
                color: this.state.color,
                cursor: 'pointer'
            }
        };
        const { formStyle, 
                nameStyle, 
                containerStyle, 
                textareaStyle, 
                emailStyle, 
                submitStyle } = styles;

        return (
            <form style={formStyle}> 
                <div style={containerStyle}>
                    <input 
                        style={nameStyle} 
                        type="text" 
                        placeholder="Imię i nazwisko" 
                        onChange={e => this.handleName(e)} 
                        value={this.state.nameValue}
                    />
                    <input 
                        style={emailStyle} 
                        type="text" 
                        placeholder="Email" 
                        onChange={(e) => this.handleEmail(e)}
                        value={this.state.emailValue}
                    />
                </div>
                <textarea 
                    style={textareaStyle} 
                    placeholder="Wiadomość" 
                    onChange={(e) => this.handleTextarea(e)}
                    value={this.state.textareaValue}
                />
                <input
                    type="submit"
                    value="WYŚLIJ" 
                    style={submitStyle} 
                    onClick={(e) => this.handleSubmit(e)} 
                    onMouseOver={() => this.handldeHoverOn()} 
                    onMouseOut={() => this.handleHoverOut()}
                />            
            </form>

        );
    }
}

export default Form;

和节点端：

const nodemailer = require('nodemailer');
const xoauth2 = require('xoauth2');

const generator = nodemailer.createTransport({
  service: 'gmail',
  auth: {
      type: 'OAuth2',
      user: 'X',
      clientId: 'X',
      clientSecret: 'X',
      refreshToken: 'X'
  }
})

const mailOptions = {
  from: 'x@gmail.com',
  to: 'x@gmail.com',
  subject: 'Mail',
  text: 'test text'
}

generator.sendMail(mailOptions, function(err, res){
  if(err){
    console.log('Error')
  } else {
    console.log('Email sent')
  }
})

Answer 1

有一种更简单的方法可以做到这一点。

它使用API​​而不是为此运行整个服务器。

我建议您检出SendGrid服务。

下面的示例用于发送多封电子邮件，也适用于您的react应用。

export function sendEmail(key, sender, email1 ,email2) {
  const url = "https://api.sendgrid.com/v3/mail/send"; // sendGrid v3 api

  const headers = {
    Authorization: `Bearer ${key}`, // your API_KEY here
    "Content-type": 'application/json',
  };

  const data = {
    personalization: [email1, email2],
    from: {
      email: sender,
    },
    content: [
      {
        type: "text/plain",
        value: "{{content}}" // little trick for custom value
      }
    ],
  };

  const request = {
    method: "post",
    headers,
    body: JSON.stringify(data)
  }

  return fetch(url, request)
   .then(response => response.json());
}

// example param: email1
const email1 = {
  to: [{
    email: recipient1,
  }],
  subject: subject1,
  substitutions: {
    "{{content}}": body, // mail body
  }
}