React提交表单后隐藏表单并显示成功提示的实现疑问

问题根源 #

1. 提交按钮同时绑定了onClick和type="submit"，逻辑冲突；且onClick内的setShow逻辑混乱，最终会将show设为true，导致表单无法隐藏。
2. 提示组件message-sent嵌套在表单内部，无法实现“替换表单”的效果。

修正方案 #

1. 清理按钮冗余逻辑

移除按钮的onClick属性，利用type="submit"自动触发表单的onSubmit事件，避免逻辑冲突。

2. 在handleSubmit中处理状态切换

在表单提交函数内先阻止默认行为，完成数据处理（或异步请求）后，将show设为false。

3. 拆分条件渲染分支

将表单和提示组件分别放在条件判断的两个分支，实现“表单隐藏后显示提示”的替换效果。

完整修正代码 #

const ContactForm = () => {
  const [show, setShow] = React.useState(true);
  const [name, setName] = React.useState('');
  const [email, setEmail] = React.useState('');
  const [message, setMessage] = React.useState('');

  const handleSubmit = (e) => {
    // 阻止表单默认提交行为
    e.preventDefault();
    
    // 这里替换为你的实际表单提交逻辑（比如发送API请求）
    // 示例异步请求：
    // fetch('/api/submit-contact', {
    //   method: 'POST',
    //   headers: { 'Content-Type': 'application/json' },
    //   body: JSON.stringify({ name, email, message })
    // })
    // .then(res => res.json())
    // .then(() => setShow(false)) // 提交成功后隐藏表单
    // .catch(err => console.error('提交失败:', err));

    // 测试用同步状态切换（可替换为上述异步逻辑）
    setShow(false);
  }

  return (
    <>
      {show ? (
        <form onSubmit={handleSubmit} className='email-form'>
          <div className='form'>
            <input 
              value={name}
              onChange={(e) => setName(e.target.value)}
              placeholder="Your Name"
            />
            <input 
              value={email}
              onChange={(e) => setEmail(e.target.value)}
              placeholder="Your Email"
            />
            <textarea 
              value={message}
              onChange={(e) => setMessage(e.target.value)}
              placeholder="Your Message"
            />
          </div>
          <button
            disabled={!name || !email || !message}
            type="submit"
            className='send-btn'
          >
            <span>Send Message</span>
          </button>
        </form>
      ) : (
        <div className='message-sent'>
          <CircleCheckBig className='sent-tick' strokeWidth={1} size={200}/>
          <p className='sent-message'>Message Sent</p>
        </div>
      )}
    </>
  );
};

额外说明 #

• 如果是异步提交，务必在请求成功的回调中执行setShow(false)，避免请求未完成就切换状态。
• 保留按钮的disabled逻辑，确保用户填写完所有必填字段才能提交。

内容的提问来源于stack exchange，提问作者ryanl