FeedbackForm.js

import { useState } from 'react';

export function FeedbackForm() {
    const [text, setText] = useState('');
    const [status, setStatus] = useState('typing');

    async function handleSubmit(e) {
        // 阻止 form 表单 默认的 submit 提交行文
        e.preventDefault();
        setStatus('sending');
        await sendMessage(text);
        setStatus('sent');
    }

    const isSending = status === 'sending';
    const isSent = status === 'sent';

    if (isSent) {
        return <h1>Thanks for feedback!</h1>
    }

    return (
        <form onSubmit={handleSubmit}>
            <p>How was your stay at The Prancing Pony?</p>
            <textarea
                disabled={isSending}
                value={text}
                onChange={e => setText(e.target.value)}
            />
            <br />
            <button
                disabled={isSending}
                type="submit"
            >
                Send
            </button>
            {isSending && <p>Sending...</p>}
        </form>
    );
}

// Pretend to send a message.
function sendMessage(text) {
    return new Promise(resolve => {
        setTimeout(resolve, 2000);
    });
}