如何在React和Node应用程序中添加加载微调器？ （Nodemailer）
我想实现类似单击“发送”按钮时的效果，微调器应出现在按钮附近，然后将“发送”按钮转换为“已发送消息”按钮。我可以实现该按钮的更改，但是没有加载时间。为什么会立即发生？
React Frontend：
import React from 'react';
import './contact.css';
import tick4 from './tick4.svg';
import copy from './copy.svg';
import axios from 'axios';
class Contact extends React.Component {
constructor(props) {
super(props);
this.state = {
name: '',
email: '',
phone: '',
loading: false,
};
this.handleChange = this.handleChange.bind(this);
this.handleSubmit = this.handleSubmit.bind(this);
}
handleChange = (e) => {
this.setState({ [e.target.name]: e.target.value });
};
handleSubmit(e) {
e.preventDefault();
const { name, email, phone } = this.state;
axios.post('/api/contact', {
name,
email,
phone,
});
this.resetForm();
}
resetForm() {
this.setState({ name: '', email: '', phone: '', loading: true });
}
render() {
return (
<div className="contact">
<div className="contact-flex">
<div className="contact-right">
<h1>GET IN TOUCH</h1>
<div>
<form onSubmit={this.handleSubmit} method="POST">
<label htmlFor="name">NAME</label>
<br />
<input
onChange={this.handleChange}
value={this.state.name}
type="text"
id="name"
name="name"
placeholder="Your full name..."
required
/>
<br />
<label htmlFor="phone">PHONE</label>
<br />
<input
onChange={this.handleChange}
type="text"
id="phone"
name="phone"
placeholder="Your phone number..."
value={this.state.phone}
required
/>
<br />
<label htmlFor="email">EMAIL</label>
<br />
<input
onChange={this.handleChange}
type="email"
id="email"
name="email"
placeholder="Your email address..."
value={this.state.email}
required
/>
<br />
{!this.state.loading && (
<button className="contact-button" type="submit">
Send
</button>
)}
{this.state.loading && (
<button className="contact-button" type="submit">
Message Sent
</button>
)}
</form>
</div>
</div>
</div>
<div className="copy">
<img src={copy} className="copysvg" alt="copy"></img>
</div>
</div>
);
}
}
export default Contact;
节点后端（Nodemailer）：
var express = require('express');
const bodyParser = require('body-parser');
var nodemailer = require('nodemailer');
const creds = require('./config');
const app = express();
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended: false }));
app.post('/api/contact', (req, res) => {
nodemailer.createTestAccount((err, account) => {
const htmlEmail = `
Name: ${req.body.name}
Phone: ${req.body.phone}
Email: ${req.body.email}
`;
let transporter = nodemailer.createTransport({
host: 'smtp.ethereal.email',
port: 587,
auth: {
user: 'MYEMAILHERE',
pass: 'MYPASSWORDHERE',
},
});
let mailOptions = {
from: req.body.name,
to: 'TOTHISEMAIL',
subject: 'Potential Client Message From The Workshop',
html: htmlEmail,
};
transporter.sendMail(mailOptions, (err, data) => {
console.log('message sent');
});
});
});
const PORT = process.env.PORT || 3001;
app.listen(PORT, () => {
console.log(`server listening on port ${PORT}`);
});
浏览器中的Javascript是异步的，因此当您发布请求时，在获取结果的同时this.resetForm函数已经被调用]
对代码进行这些更改：
toggleLoading = () => {
this.setState(prevState => {
loading: !prevState.loading
})
}
handleSubmit(e) {
e.preventDefault();
const { name, email, phone } = this.state;
this.toggleLoading()
axios.post('/api/contact', {
name,
email,
phone,
})
.then(result => {
this.resetForm();
//something
})
.catch(err => {
//something
this.toggleLoading()
});
}
resetForm() {
this.setState({ name: '', email: '', phone: '', loading: false });
}
注意：在resetForm中将加载更改为false
建议：您无需写入按钮即可保存。只是这样做
<button className="contact-button" type="submit">
{this.state.loading ? 'Saving...' : 'Send'}
</button>
您不需要这个
this.handleChange = this.handleChange.bind(this);
如果使用箭头功能，除非您使用的是非常老的react版本
如何在React和Node应用程序中添加加载微调器？ （Nodemailer）
我想实现类似单击“发送”按钮时的效果，微调器应出现在按钮附近，然后将“发送”按钮转换为“已发送消息”按钮。我可以实现该按钮的更改，但是没有加载时间。为什么会立即发生？
React Frontend：
import React from 'react';
import './contact.css';
import tick4 from './tick4.svg';
import copy from './copy.svg';
import axios from 'axios';
class Contact extends React.Component {
constructor(props) {
super(props);
this.state = {
name: '',
email: '',
phone: '',
loading: false,
};
this.handleChange = this.handleChange.bind(this);
this.handleSubmit = this.handleSubmit.bind(this);
}
handleChange = (e) => {
this.setState({ [e.target.name]: e.target.value });
};
handleSubmit(e) {
e.preventDefault();
const { name, email, phone } = this.state;
axios.post('/api/contact', {
name,
email,
phone,
});
this.resetForm();
}
resetForm() {
this.setState({ name: '', email: '', phone: '', loading: true });
}
render() {
return (
<div className="contact">
<div className="contact-flex">
<div className="contact-right">
<h1>GET IN TOUCH</h1>
<div>
<form onSubmit={this.handleSubmit} method="POST">
<label htmlFor="name">NAME</label>
<br />
<input
onChange={this.handleChange}
value={this.state.name}
type="text"
id="name"
name="name"
placeholder="Your full name..."
required
/>
<br />
<label htmlFor="phone">PHONE</label>
<br />
<input
onChange={this.handleChange}
type="text"
id="phone"
name="phone"
placeholder="Your phone number..."
value={this.state.phone}
required
/>
<br />
<label htmlFor="email">EMAIL</label>
<br />
<input
onChange={this.handleChange}
type="email"
id="email"
name="email"
placeholder="Your email address..."
value={this.state.email}
required
/>
<br />
{!this.state.loading && (
<button className="contact-button" type="submit">
Send
</button>
)}
{this.state.loading && (
<button className="contact-button" type="submit">
Message Sent
</button>
)}
</form>
</div>
</div>
</div>
<div className="copy">
<img src={copy} className="copysvg" alt="copy"></img>
</div>
</div>
);
}
}
export default Contact;
节点后端（Nodemailer）：
var express = require('express');
const bodyParser = require('body-parser');
var nodemailer = require('nodemailer');
const creds = require('./config');
const app = express();
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended: false }));
app.post('/api/contact', (req, res) => {
nodemailer.createTestAccount((err, account) => {
const htmlEmail = `
Name: ${req.body.name}
Phone: ${req.body.phone}
Email: ${req.body.email}
`;
let transporter = nodemailer.createTransport({
host: 'smtp.ethereal.email',
port: 587,
auth: {
user: 'MYEMAILHERE',
pass: 'MYPASSWORDHERE',
},
});
let mailOptions = {
from: req.body.name,
to: 'TOTHISEMAIL',
subject: 'Potential Client Message From The Workshop',
html: htmlEmail,
};
transporter.sendMail(mailOptions, (err, data) => {
console.log('message sent');
});
});
});
const PORT = process.env.PORT || 3001;
app.listen(PORT, () => {
console.log(`server listening on port ${PORT}`);
});
浏览器中的Javascript是异步的，因此当您发布请求时，在获取结果的同时this.resetForm函数已经被调用]
对代码进行这些更改：
toggleLoading = () => {
this.setState(prevState => {
loading: !prevState.loading
})
}
handleSubmit(e) {
e.preventDefault();
const { name, email, phone } = this.state;
this.toggleLoading()
axios.post('/api/contact', {
name,
email,
phone,
})
.then(result => {
this.resetForm();
//something
})
.catch(err => {
//something
this.toggleLoading()
});
}
resetForm() {
this.setState({ name: '', email: '', phone: '', loading: false });
}
注意：在resetForm中将加载更改为false
建议：您无需写入按钮即可保存。只是这样做
<button className="contact-button" type="submit">
{this.state.loading ? 'Saving...' : 'Send'}
</button>
您不需要这个
this.handleChange = this.handleChange.bind(this);
如果使用箭头功能，除非您使用的是非常老的react版本