我希望能够通过单击发送电子邮件按钮(使用React,LoopBack,MongoDB)向gmail/yahoo帐户发送真



(Using React/LoopBack/MongoDB( 我想将电子邮件发送到已经保存在用户帐户集合中的电子邮件,有一个电子邮件属性,我可以通过 this.props.account.email 访问,我在网上搜索但我不知道如何正确实现任何,是否有任何某些导入?如何让它通过按钮单击发送电子邮件。这是我的前端代码,用于找到按钮的页面(按钮位于返回符下方(:

---------法典--------

/* eslint linebreak-style: ["error", "windows"] */
import React, { Component } from 'react';
import axios from 'axios';
import { connect } from 'react-redux';
import PropTypes from 'prop-types';
import { Helmet } from 'react-helmet';
// Grommet
import Box from 'grommet/components/Box';
import Heading from 'grommet/components/Heading';
import Accordion from 'grommet/components/Accordion';
import AccordionItem from '../../Components/Accordion';
import AccountDescrSection from './Sections/AccountDescription';
import AccountActions from '../../../../Redux/AccountRedux';
import ActivityIndicator from '../../../../Components/ActivityIndicator';

import './Styles.scss';
class AccountScreen extends Component {
  constructor(props) {
    super(props);
    this.state = {
      activeSection: []
    };
  }
  componentDidMount() {
    this.props.get();
  }
  componentWillMount() {
    this.getComments();
  }
  getComments() {
    axios.get('http://localhost:3001/api/Comments')
      .then(response => {
        console.log(response.data);
      });
  }

  render() {
    return (
      <Box pad='medium' className='dashboard-settings'>
        <p>
          { (
            <button
              style={{ background: 'yellow', color: 'black', style: 'text-align:center;' }}
            >
            Send email
            </button>
          )}
        </p>
        <Helmet>
          <title>Office Hours | Account Settings</title>
        </Helmet>
        <Box>
          <Heading tag='h3' className='screen-title'>
            Profile
          </Heading>
        </Box>
        <Choose>
          <When condition={ this.props.fetching || !this.props.account.id }>
            <Box align='center' pad='xlarge' margin='large'>
              <ActivityIndicator />
            </Box>
          </When>
          <Otherwise>
            <Accordion active={this.state.activeSection} animate={false} openMulti={false}>
              {AccordionItem({
                title: 'Name',
                description: <div><b>{this.props.account.name}</b></div>
              })}
              {AccordionItem({
                title: 'Description',
                description: <div><b>{this.props.account.description}</b></div>,
                content: <AccountDescrSection close={() => this.setState({ activeSection: [] })} />
              })}

              {AccordionItem({
                title: 'Email address',
                description: <div>{this.props.account.email}</div>
              })}
              {AccordionItem({
                title: 'Description',
                description: <div><b>{this.props.account.description}</b></div>
              })}
              {AccordionItem({
                title: 'Password',
                description: <div>Click on edit profile to change or edit password </div>
              })}
            </Accordion>
          </Otherwise>
        </Choose>
      </Box>
    );
  }
}
const mapStateToProps = store => {
  return {
    account: store.account.data,
    fetching: store.account.fetching
  };
};
const mapDispatchToProps = dispatch => {
  return {
    get: () => dispatch(AccountActions.accountGet())
  };
};
AccountScreen.propTypes = {
  get: PropTypes.func,
  fetching: PropTypes.bool,
  account: PropTypes.object,
  comment: PropTypes.object
};
export default connect(mapStateToProps, mapDispatchToProps)(AccountScreen);
enter code here

提前谢谢。

您可以在环回中创建和调用自定义方法,并使用 nodemailer 发送电子邮件

Model.on('method', function(info) {
  //var url = ''; if you want to give a link
  var html = 'Click <a href="' + url +  '">here</a>';
  Model.app.models.Emailmodel.send({
    to: info.email,
    from: senderAddress,
    subject: 'your subject',
    html: html
  }, function(err) {
    if (err) return console.log('> error sending email');
    console.log('> sending email to:', info.email);
  });
});

最新更新