react实现发邮件功能
时间: 2024-03-24 09:13:11 浏览: 27
要在React中实现发邮件功能,需要使用SMTP协议来发送电子邮件。可以使用第三方库如nodemailer来实现。以下是一个基本的例子:
1. 安装nodemailer库
```
npm install nodemailer
```
2. 创建一个发送邮件的组件
```
import React, { useState } from 'react';
import nodemailer from 'nodemailer';
const Mailer = () => {
const [message, setMessage] = useState('');
const handleSend = async () => {
try {
const transporter = nodemailer.createTransport({
host: 'smtp.gmail.com',
port: 587,
secure: false,
auth: {
user: 'your_email@gmail.com',
pass: 'your_password',
},
});
const info = await transporter.sendMail({
from: 'your_email@gmail.com',
to: 'recipient_email@gmail.com',
subject: 'Test Email',
text: message,
});
console.log('Message sent:', info.messageId);
} catch (error) {
console.error('Error:', error);
}
};
return (
<div>
<textarea
value={message}
onChange={(event) => setMessage(event.target.value)}
/>
<button onClick={handleSend}>Send</button>
</div>
);
};
export default Mailer;
```
3. 在应用程序中使用组件
```
import React from 'react';
import Mailer from './Mailer';
const App = () => {
return (
<div>
<Mailer />
</div>
);
};
export default App;
```
这将在浏览器中呈现一个文本区域和一个发送按钮。用户可以在文本区域中输入消息并点击发送按钮将其发送到指定的电子邮件地址。
相关推荐
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)