Отправка формы

function LoginForm() {
    const [email, setEmail] = useState('');
    const [password, setPassword] = useState('');

    function handleSubmit(e: React.FormEvent<HTMLFormElement>) {
        e.preventDefault();
        console.log({ email, password });
    }

    return (
        <form onSubmit={handleSubmit}>
            <input
                type="email"
                value={email}
                onChange={(e) => setEmail(e.target.value)}
            />
            <input
                type="password"
                value={password}
                onChange={(e) => setPassword(e.target.value)}
            />
            <button type="submit">Войти</button>
        </form>
    );
}

<button type="submit">Отправить</button>

async function handleSubmit(e: React.FormEvent) {
    e.preventDefault();

    const res = await fetch('/api/login', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ email, password }),
    });

    if (res.ok) {
        // успех
    } else {
        // ошибка
    }
}

const [isSubmitting, setIsSubmitting] = useState(false);

async function handleSubmit(e: React.FormEvent) {
    e.preventDefault();
    setIsSubmitting(true);

    try {
        await fetch('/api/login', { ... });
    } finally {
        setIsSubmitting(false);
    }
}

<button type="submit" disabled={isSubmitting}>
    {isSubmitting ? 'Отправка...' : 'Войти'}
</button>

const [error, setError] = useState('');

async function handleSubmit(e: React.FormEvent) {
    e.preventDefault();
    setError('');

    const res = await fetch('/api/login', { ... });

    if (!res.ok) {
        const data = await res.json();
        setError(data.message ?? 'Ошибка');
        return;
    }

    // успех
}

{error && <p className="error">{error}</p>}

async function handleSubmit(e: React.FormEvent) {
    e.preventDefault();
    await fetch('/api/posts', { ... });
    setTitle('');
    setBody('');
}

const formRef = useRef<HTMLFormElement>(null);

async function handleSubmit(e: React.FormEvent) {
    e.preventDefault();
    await fetch('/api/posts', { ... });
    formRef.current?.reset();
}

<form onSubmit={handleSubmit}>
    <input value={title} onChange={(e) => setTitle(e.target.value)} />

    <button type="submit">Сохранить</button>
    <button type="button" onClick={handleCancel}>Отмена</button>
    <button type="reset">Очистить</button>
</form>

function handleSubmit(e: React.FormEvent) {
    e.preventDefault();

    if (!email.includes('@')) {
        setError('Некорректный email');
        return;
    }

    if (password.length < 8) {
        setError('Пароль слишком короткий');
        return;
    }

    // отправка
}

async function handleSubmit(e: React.FormEvent) {
    e.preventDefault();

    const formData = new FormData(e.currentTarget as HTMLFormElement);

    await fetch('/api/upload', {
        method: 'POST',
        body: formData,
    });
}

<button type="submit" disabled={isSubmitting}>Отправить</button>

async function handleSubmit(e: React.FormEvent) {
    e.preventDefault();
    if (isSubmitting) return;

    setIsSubmitting(true);
    // ...
}