Html 如何在React和Node应用程序中添加加载微调器？（点头者）

我想实现这样的效果：当我点击Send按钮时，按钮附近会出现一个微调器，然后将Send按钮转换为Message Sent按钮。我可以实现按钮的改变，但没有加载时间。为什么会立即发生

反应前端：

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;

---

浏览器中的Javascript是异步的，因此当您发布请求时，当您得到结果时，已经调用了这个.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>

---

如果您使用的是arrow函数，除非您使用的是非常旧的react版本

，您可以在函数'async handleSubmit（e）`中添加async/await，在sand之前，您应该将加载状态设置为

true

，在

await axios.post之后（“/api/contact”

设置

加载

状态为

假

下一步，您可以使用

加载

状态在jsx代码中显示条件也可以说明您知道用于显示按钮的内容，您可以重命名为

isDataSent

谢谢您的快速回复。我稍后会检查并返回。AFK:）感谢您的全面快速评论。我稍后会检查并回复。AFK now.：）此外，您还需要添加新状态，如sent:true/false，在成功时将状态设置为true，并相应地显示消息。有很多方法可以做到这一点。只是一个建议

<button className="contact-button" type="submit">
    {this.state.loading ? 'Saving...' : 'Send'}
</button>

 this.handleChange = this.handleChange.bind(this);