React中如何基于状态变化实现组件条件渲染及编写handleSubmit函数？

核心逻辑 #

通过状态变量精准控制组件显示：

• 当showForm为true时渲染表单
• 表单提交后切换状态，隐藏表单并展示成功提示

完整实现代码 #

import { useState } from 'react';

function App() {
  const [showForm, setShowForm] = useState(true);
  const [showSuccessMessage, setShowSuccessMessage] = useState(false);

  // 表单提交处理函数
  const handleSubmit = (e) => {
    e.preventDefault();
    // 这里可添加表单数据校验、接口请求等业务逻辑
    console.log('表单数据已处理');

    // 切换状态：隐藏表单，显示成功消息
    setShowForm(false);
    setShowSuccessMessage(true);
  };

  return (
    <div>
      {/* 条件渲染表单：仅showForm为true时显示 */}
      {showForm && (
        <form onSubmit={handleSubmit}>
          <input type="text" placeholder="请输入内容" required />
          <button type="submit">提交</button>
        </form>
      )}

      {/* 条件渲染成功提示 */}
      {showSuccessMessage && (
        <div>
          *提交成功！*
        </div>
      )}

      {/* 可选：添加重置按钮，重新显示表单 */}
      {showSuccessMessage && (
        <button onClick={() => {
          setShowForm(true);
          setShowSuccessMessage(false);
        }}>
          再次提交
        </button>
      )}
    </div>
  );
}

export default App;

关键说明 #

• handleSubmit里先调用e.preventDefault()阻止表单默认跳转行为，再处理业务逻辑
• 状态切换是核心：提交完成后把showForm设为false，showSuccessMessage设为true
• 用{showForm && <表单组件>}的短路语法实现条件渲染，只有当showForm为真时才会渲染表单

内容的提问来源于stack exchange，提问作者SIDDHANT R SEN