如何使用React强制发送包含多个字段的表单？

import React, { useState } from 'react';

const Form = () => {
  const [formData, setFormData] = useState({ name: '', email: '', message: '' });

  const handleInputChange = (e) => {
    const { name, value } = e.target;
    setFormData((prevData) => ({ ...prevData, [name]: value }));
  };

  const handleSubmit = () => {
    // 表单验证逻辑
    if (formData.name === '' || formData.email === '' || formData.message === '') {
      alert('请填写所有字段');
      return;
    }

    // 发送表单数据
    fetch('/api/submit-form', {
      method: 'POST',
      body: JSON.stringify(formData),
      headers: {
        'Content-Type': 'application/json',
      },
    })
      .then((response) => response.json())
      .then((data) => {
        // 根据服务器响应进行处理
        if (data.success) {
          alert('表单提交成功');
          setFormData({ name: '', email: '', message: '' }); // 重置表单字段的值
        } else {
          alert('表单提交失败');
        }
      })
      .catch((error) => {
        console.error('表单提交错误:', error);
      });
  };

  return (
    <form>
      <label>
        姓名:
        <input type="text" name="name" value={formData.name} onChange={handleInputChange} />
      </label>
      <br />
      <label>
        邮箱:
        <input type="email" name="email" value={formData.email} onChange={handleInputChange} />
      </label>
      <br />
      <label>
        消息:
        <textarea name="message" value={formData.message} onChange={handleInputChange} />
      </label>
      <br />
      <button type="button" onClick={handleSubmit}>提交</button>
    </form>
  );
};

export default Form;