在React中提交表单后如何显示消息？

在React中提交表单后，可以通过以下步骤来显示消息：

创建一个表单组件，包含需要提交的表单字段。
在表单组件的状态中添加一个用于存储消息的变量，例如message。
在表单的提交事件处理函数中，阻止默认的表单提交行为，并将表单字段的值发送到服务器进行处理。
在服务器返回响应后，根据响应结果更新表单组件的状态，将服务器返回的消息存储在message变量中。
在表单组件的渲染函数中，根据message变量的值来决定是否显示消息。
使用条件渲染，当message变量不为空时，显示消息。

以下是一个示例代码：

import React, { useState } from 'react';

const FormComponent = () => {
  const [message, setMessage] = useState('');

  const handleSubmit = (event) => {
    event.preventDefault();
    // 发送表单数据到服务器进行处理
    // 假设服务器返回的响应中包含一个名为"responseMessage"的字段，用于存储消息
    const response = await fetch('/submit-form', {
      method: 'POST',
      body: new FormData(event.target),
    });
    const data = await response.json();
    setMessage(data.responseMessage);
  };

  return (
    <div>
      <form onSubmit={handleSubmit}>
        {/* 表单字段 */}
        <input type="text" name="name" />
        <input type="email" name="email" />
        {/* 其他表单字段 */}
        <button type="submit">提交</button>
      </form>
      {message && <p>{message}</p>}
    </div>
  );
};

export default FormComponent;

在上述示例中，表单组件通过useState钩子函数来创建message状态变量，并在提交事件处理函数中使用fetch函数发送表单数据到服务器。服务器返回的响应数据中的responseMessage字段被存储在message变量中，并在渲染函数中进行条件渲染，当message不为空时，显示消息。

请注意，这只是一个简单的示例，实际应用中可能需要根据具体需求进行适当的修改和扩展。