从react js联系表格发送邮件

Question

我在react js中有一个联系表单。我需要发送邮件到相应的imputed mail id.Iam new in react js。我已经使用的代码是下面给出的。请帮助我，如何从这个联系表单发送邮件.Thank you in advance. 该联系表单使用的邮件ID，我需要发送一些文本信息到这个邮件ID。

import React, { FormEvent, ReactElement } from 'react';
import { noop } from 'rxjs';
import { EmailData } from '../../../models/i-email-data';
import { EmailInput, MessageInput, NameInput, SubjectInput } from './';

interface Props {
    onSubmit: (data: EmailData) => Promise<any>;
}

type State = EmailData;

export class ContactForm extends React.Component<Props, State> {
    public state: State = {
        name: '',
        email: '',
        subject: '',
        message: '',
    };

    public render(): ReactElement {
        const { name, email, subject, message } = this.state;
        return (
            <>
                <h3 className='contact-form__title'> Send a Message </h3>

                    <form className='form' onSubmit={(event) => {event.preventDefault(); this.props.onSubmit(this.state);}}>
                    <NameInput onChange={this.handleInputChange} value={name} />
                    <EmailInput onChange={this.handleInputChange} value={email} />
                    <SubjectInput onChange={this.handleInputChange} value={subject} />
                    <MessageInput onChange={this.handleInputChange} value={message} />
                    <div className='contact-form__btn-wrapper'>
                        <button className='contact-form__submit'> Submit</button>
                    </div>
                </form>
            </>
        );
    }

    private handleInputChange = (event: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>): void => {
        const { value, name } = event.target;
        this.setState({ [name]: value } as any);
    };
    handleInputChange = (name) => ({ target }) => {
    this.setState((prevState) => ({
    ...prevState,
    [name]: target.value
    });
    }
    private onSubmit = async (e: FormEvent): Promise<void> => {
        try {
            e.preventDefault();
            await this.props.onSubmit(this.state);
            this.setState({ name: '', email: '', subject: '', message: '' });
        } catch (e) {
            noop();
        } 
    };
  }
}

Answer 1

不幸的是，只是 react 就不足以达到这个目的。例如，请看 https:/blog.mailtrap.ioreact-send-email。

Answer 2

你可以使用npm库来实现。senemail

senemail npm库链接

var sendemail = require('sendemail')
var email = sendemail.email;

var person = {
  name : user inputed name,
  email: user inputed email,
  subject:"Subject of your Email"
}

email('welcome', person, function(error, result){
  console.log(' - - - - - - - - - - - - - - - - - - - - -> email sent: ');
  console.log(result);
  console.log(' - - - - - - - - - - - - - - - - - - - - - - - - - - - -')
})

Answer 3

你不能只用前台发送邮件，你必须为此准备一个服务器后台，或者使用第三方服务。