React Native 发送邮件

Question

大家好，我正在使用 AWS SES 发送电子邮件，故事情节是，如果用户忘记了密码，用户会将他们的电子邮件地址输入 TextInput 它会通过电子邮件发送一个代码，（请参考下图）

注意：在我的 AWS SES 中，我的账户已经过验证，

这是我的示例代码

  import React, {useState, createRef} from 'react';
  //i dont know if i am doing right here
  const submitForm = ({ event }) => {
    const payload = {
      url: '/user/forgotpassword',
      email: this.state.Email,
    };

    post(payload)
      .then(() => {
        // on success, clear any errors and set submitted state to true
        this.useState({ error: null, submitted: true });
      })
      .catch((error) => {
        // on error, update error state with the error message and set submitted to false
        this.setState({ error: error.message, submitted: false });
      });
  };

  <View style={formStyles.SectionStyle}>
     <Text style={formStyles.label1}>Email Address:</Text>
        <TextInput
  name="email"
  id="email"
  style={formStyles.inputStyle}
  onChangeText={(text) => this.setState({ Email: text })}
  placeholder="Enter Email Address"
  placeholderTextColor="#8b9cb5"
  autoCapitalize="none"
  keyboardType="email-address"
  returnKeyType="next"
  underlineColorAndroid="#f000"
  blurOnSubmit={false}
/>
    </View>
    <Hoverable>
              {isHovered => (
              <TouchableOpacity
                style={{
                  backgroundColor: isHovered ? '#FFFFFF':'#00ADEF',
                  borderWidth: 1,
                  color: '#FFFFFF',
                  borderColor: '#008ABE',
                  height: 37,
                  width: '90%',
                  alignItems: 'center',
                  borderRadius: 8,
                  marginTop: 20,
                  marginLeft: 50,
                  marginRight: 50,
                  //
                }}
        onPress={() => submitForm()}
                activeOpacity={0.5}>
                <Text style={{
                  color: isHovered ? '#00ADEF':'#FFFFFF',
                  paddingVertical:5,
                  fontSize: 18,
                }}>Proceed to Password Reset</Text>
                
              </TouchableOpacity>
              )}
    </Hoverable>

node.js 接口

async function forgotpassword(req, res, next){
  var nodemailer = require('nodemailer');

  let transporter = nodemailer.createTransport({
    host: "email-smtp.ap-southeast-1.amazonaws.com",
    port: 465,
    secure: true,
    auth: {
      user: "******************",
      pass: "******************"
    }
  });

var mailOptions = {
  from: 'support@ecomerce.com',
  to: 'testingfor573@gmail.com',
  subject: 'Sending Email using Node.js',
  text: 'That was easy!'
};

transporter.sendMail(mailOptions, function(error, info){
  if (error) {
    console.log(error);
  } else {
    console.log('Email sent: ' + info.response);
  }
});
}

这是错误

Answer 1

为此创建一个名为Email 的状态变量并存储它的值。

在按下提交按钮时使用此值发送邮件..

像这样-

在你的constructor

this.state = {
      ...
      Email: "",
      ...
    }

你的 `` 函数应该是这样的 -

const submitForm = ({ event }) => {
    const payload = {
      url: '/user/forgotpassword',
      email: this.state.Email,
    };

    post(payload)
      .then(() => {
        // on success, clear any errors and set submitted state to true
        this.setState({ error: null, submitted: true });
      })
      .catch((error) => {
        // on error, update error state with the error message and set submitted to false
        this.setState({ error: error.message, submitted: false });
      });
  };

渲染代码

<View style={formStyles.SectionStyle}>
        <Text style={formStyles.label1}>Email Address:</Text>
        <TextInput
          name="email"
          id="email"
          style={formStyles.inputStyle}
          onChangeText={(text) => this.setState({ Email: text })}
          placeholder="Enter Email Address"
          placeholderTextColor="#8b9cb5"
          autoCapitalize="none"
          keyboardType="email-address"
          returnKeyType="next"
          underlineColorAndroid="#f000"
          blurOnSubmit={false}
        />
      </View>
      <Hoverable>
        {(isHovered) => (
          <TouchableOpacity
            style={{
              backgroundColor: isHovered ? '#FFFFFF' : '#00ADEF',
              borderWidth: 1,
              color: '#FFFFFF',
              borderColor: '#008ABE',
              height: 37,
              width: '90%',
              alignItems: 'center',
              borderRadius: 8,
              marginTop: 20,
              marginLeft: 50,
              marginRight: 50,
              //
            }}
            onPress={() => submitForm()}
            activeOpacity={0.5}>
            <Text
              style={{
                color: isHovered ? '#00ADEF' : '#FFFFFF',
                paddingVertical: 5,
                fontSize: 18,
              }}>
              Proceed to Password Reset
            </Text>
          </TouchableOpacity>
        )}
      </Hoverable>