如何在 React 和 Node 应用程序中添加加载微调器？ （节点邮件程序）

Question

我想实现类似当我单击发送按钮时，按钮附近应该出现一个微调器，然后将发送按钮转换为消息发送按钮。我可以实现按钮更改，但没有加载时间。为什么会立即发生？

反应前端：

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}`);
});

Answer 1

浏览器中的 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 版本