0

我的网站是使用 React 编写的。我希望网站是静态的，这样我就可以将它放在 Github 上并使用 Netlify 托管它。

下面的代码是我的电子邮件表格。目前我正在使用一个 php 脚本。我想更改它以使我的网站静态化。我真的只是想知道我必须将操作更改为在线action='./php/sendEmail.php'，以便我不再需要使用 php 并且可以访问我的 sendinblue 帐户（我听说它在一定程度上是免费的，所以这就是为什么我想通过 mailgun 使用它）并向我的电子邮件地址发送电子邮件。

var Field = (props) => {
    return (
        <input id={props.id} className={props.className} aria-invalid="false" name={props.name} placeholder={props.name} data-aid={props.dataAid} type={props.type} onChange={(e) => dispatch(editValue(e.target.value,item.id)) }></input>
    )
}
Field.defaultProps = { type: 'text'}

var EmailForm = (props) => {

    return (
        <div className="form" data-state="desktop left" data-dcf-columns="4">
            <form action='./php/sendEmail.php' method="post" role="form" aria-label="contact form" className="form_style-wrapper" encType="multipart/form-data">
                <Field id='field1' name='Name' dataAid='nameField' className='field_word required' />
                <Field id='field2' name='Email' dataAid='emailField' className='field_word required' />
                <Field id='field3' name='Phone' dataAid='emailField' type='hidden' className='field_word' />
                <Field id='field4' name='Subject' dataAid='subjectField' className='field_word' />
                <textarea name="Message" className="message" placeholder="Message" data-aid="messageField"></textarea>
                <button className="sendButton" type="submit" name="submit" value="Send">Send</button>                           
            </form>
        </div>
    )
}

EmailForm.defaultProps = {
    action: 'handleSubmit'
}
4

2 回答 2

1

您可以在 Sendinblue 帐户上配置字段，并且可以使用他们的 REST API 发送电子邮件。

您需要创建和配置模板。 https://developers.sendinblue.com/reference#sendtransacemail

一个示例 API 调用：

curl --request POST \
  --url https://api.sendinblue.com/v3/smtp/email \
  --header 'accept: application/json' \
  --header 'api-key:YOUR_API_KEY' \
  --header 'content-type: application/json' \
  --data '{  
   "sender":{  
      "name":"Sender Alex",
      "email":"senderalex@example.com"
   },
   "to":[  
      {  
         "email":"testmail@example.com",
         "name":"John Doe"
      }
   ],
   "subject":"Hello world",
   "htmlContent":"<html><head></head><body><p>Hello,</p>This is my first transactional email sent from Sendinblue.</p></body></html>"
}'

编辑：

如果要点击 API 调用，首先需要维护表单状态。所以最好将您的功能组件转换为有状态组件。

您可以在此处阅读有关有状态组件的更多信息：https ://medium.com/@imletaconnoux/stateful-and-stateless-components-in-react-5da5cedb808f

根据您的要求，我制作了一个在表单提交时进行 api 调用（使用axios ）的示例。您可以使用该参考并将其实施到您的应用程序中。您也可以使用fetch api而不是 axios

https://codesandbox.io/s/misty-sun-2xpri

于 2020-03-17T05:08:08.030 回答
0

正如 Saurabh 所说 - 您可以向 Sendinblue 服务器发出 API 请求，该服务器将从他们的后端向您发送电子邮件。您可以非常简单地使用fetch模块从表单中发送数据。您需要编写 javascript 来从一个对象中的表单中收集所有字段值，然后将其发送到目标 url。

于 2020-03-23T21:28:36.150 回答