Question

大家好，我想创建一个表单，让客户填写他们的联系信息，然后将其发送到我的电子邮件中，到目前为止，我已经有了以下代码：

import React, { Component } from 'react';

import kontakthornavlnka 
from'../../assets/svg/kontakt-horna.svg';
import kontaktdolnavlnka 
from'../../assets/svg/kontakt-dolna.svg';

class Kontaktformular extends Component {
  state = {
    menoPriezvisko:'',
    email:'',
    telephone:'',
    message:'',
  }

  change = e => {
    this.setState({
      [e.target.name]: e.target.value
    });
  };

  onSubmit = (e) => {
    e.preventDefault();
    console.log(this.state)
  };

  render() {

    {}


return (

<div className="kontaktformular" >


  <img src={kontakthornavlnka} alt="kontakthornavlnka" />

<center>

  <h3>Zaujal Vás niektorý produkt ?<br />Kontaktujte nás.</h3>

</center>
<form>
  <div className="tabulka">

    <div className="tabulkaleft">

      <div><input name="menoPriezvisko" value={this.state.menoPriezvisko} onChange={e => this.change(e)} className="form-control" placeholder="Meno a priezvysko"/></div>
      <div><input name="email" value={this.state.email} onChange={e => this.change(e)} className="form-control required email" placeholder="E-mail"/></div>
      <div><input name="telephone" value={this.state.telephone} onChange={e => this.change(e)} className="form-control required mobile"  placeholder="Telefón"/></div>

    </div>

    <div className="tabulkaright">

      <div><textarea name="message" value={this.state.message} onChange={e => this.change(e)} className="form-control textarea required">Dobrý deň chcel by som sa spýtať </textarea></div>

    </div>

  </div>



  <input onClick={e => this.onSubmit(e)} id="button"  type="submit" name="send_contact" data-loading-text="Please wait..." value="Odoslať" />

  <img id="img" src={kontaktdolnavlnka} alt="kontaktdolnavlnka" />

  <p>Vytvoril: Sebastián Danáč</p>



</div>



    );
  }
}

export default Kontaktformular;

React console正在显示新值，并且已被识别，但是我不知道如何将这些值发送到我的电子邮件，我想我将不得不在onSummit下写一些东西

Answer 1

您必须将请求发送到Web服务器，然后在其中发送电子邮件。直接从浏览器发送电子邮件-不可能，您能做的-使用下一个技巧：

window.open('mailto:your@email.here.com');

此外，您可以使用一些技巧来放置subject，body等。但是它不能在所有OS上稳定运行，甚至在不同的浏览器中也可能不同。 br /> 附言 Source of answear

Answer 2

我建议从您的客户端组件向服务器发送POST请求-提取将起作用。然后，使用服务器中的Nodemailer之类的模块将信息发送到您的电子邮件地址。

https://nodemailer.com/

您将需要为服务器中的电子邮件正文写一些基本的HTML，但这应该很容易做到。只需将HTML保存在字符串中并将其存储在变量中即可；然后将此变量放入您的Nodemailer实例中。在提供的链接中查看文档。

如何在我的react js网站上创建发送电子邮件表单到特定地址的电子邮件

2 个答案: