处理成功提交时的表单清除和提交消息- React

import React, { useState } from 'react';

const FormComponent = () => {
  const [name, setName] = useState('');
  const [email, setEmail] = useState('');
  const [message, setMessage] = useState('');
  const [successMessage, setSuccessMessage] = useState('');

  const handleSubmit = (e) => {
    e.preventDefault();

    // 执行表单提交操作，例如发送请求到后端
    // 假设请求成功后，执行以下操作
    // 清除表单字段的值
    setName('');
    setEmail('');
    setMessage('');

    // 显示提交成功的消息
    setSuccessMessage('提交成功！');
  };

  return (
    <form onSubmit={handleSubmit}>
      <input
        type="text"
        value={name}
        onChange={(e) => setName(e.target.value)}
        placeholder="姓名"
      />
      <input
        type="email"
        value={email}
        onChange={(e) => setEmail(e.target.value)}
        placeholder="邮箱"
      />
      <textarea
        value={message}
        onChange={(e) => setMessage(e.target.value)}
        placeholder="留言"
      ></textarea>
      <button type="submit">提交</button>
      {successMessage && <p>{successMessage}</p>}
    </form>
  );
};

export default FormComponent;