如何将React Form与Mailgun连接起来?

时间:2018-08-05 04:11:16

标签: reactjs mailgun

我正在使用React 16和'mailgun.js“:” ^ 2.0.1“,这是我的新手。我有一个简单的表单,想用mailgun发送出去。我拥有mailgun的所有凭据但是我不知道如何将我的react组件与mailgun相连,以便将其邮寄到指定的电子邮件地址。这是我的代码,如果可以的话,我会很感激。

            import React from 'react';
            import mailgun from 'mailgun.js';

            const mg = mailgun.client({
              username: 'api',
              key: process.env.MAILGUN_API_KEY || '',
              public_key: process.env.MAILGUN_PUBLIC_KEY || 'pubkey-yourkeyhere'
            });

            class Form extends React.Component {
              constructor(props) {
                super(props)

                this.state = {
                  firstName: '',
                  lastName: '',
                  email: '',
                  phone: '',
                  message: '',
                }
              }

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

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

              render() {
                const { firstName, lastName, email, phone, message } = this.state;
                return (
                  <form className={styles}>
                    <div className="Group_wrapper">
                      <input
                        name="fistName"
                        placeholder="First Name"
                        value={firstName}
                        onChange={e => this.onChangeHandler(e)}
                      />
                      <input
                        name="lastName"
                        placeholder="Last Name"
                        value={lastName}
                        onChange={e => this.onChangeHandler(e)}
                      />
                    </div>
                    <div className="Group_wrapper">
                      <input
                        name="email"
                        placeholder="Email"
                        value={email}
                        onChange={e => this.onChangeHandler(e)}
                      />
                      <input
                        name="phone"
                        placeholder="Phone"
                        value={phone}
                        onChange={e => this.onChangeHandler(e)}
                      />
                    </div>
                    <textarea
                      name="message"
                      placeholder="Message"
                      value={message}
                      onChange={e => this.onChangeHandler(e)}
                    />
                    <button onClick={(e) => this.onSubmit(e)} className="Btn_ivent">Send</button>
                        </form>

                );
              }
            }

            export default Form;

0 个答案:

没有答案