提交后隐藏表单

Question

我正在尝试创建一个钩子，在提交表单后隐藏我的表单，同时尝试在之后显示消息发送的图像，但我似乎无法让

form

消失。

到目前为止我已经尝试过这个：

const ContactForm = () => {
  ...
  const [show, setShow] = React.useState(true);

const handleSubmit = (e) => {
  ...
}

我的内容在这里：

return (
 <>
  {show ? (
          <form onSubmit={handleSubmit} className='email-form'>
            <div className='form'>
              <input .../>
              <input .../>
              <textarea .../>
            </div>
            <button
              disabled={!name || !email || !message}
              onClick={() => {
                handleSubmit();
                setShow(!show);
                if(!handleSubmit) {
                  setShow(false)
                } else {
                  setShow(true)
                }
              }}
             type="submit"
             className='send-btn'
            >
              <span>Send Message</span>
           </button>
   
       <div className='message-sent'>
          <CircleCheckBig className='sent-tick' strokeWidth={1} size={200}/>
          <p className='sent-message'>Message Sent</p>
        </div>
      </form>) : null}
  </>

我希望当单击“发送消息”按钮时

'email-form'

消失并替换为

message-sent

<div>

。关于如何实现这一目标有什么想法吗？谢谢你。

我主要尝试了 if 语句和 hooks。

Answer 1

完全摆脱此代码：

if(!handleSubmit) {
  setShow(false)
} else {
  setShow(true)
}

您已将

handleSubmit

定义为函数，因此将其解释为布尔值 (1) 没有任何意义，并且 (2) 始终为 truthy（您将其否定为

false

）。 由于结果始终相同，因此您始终调用

else

块并始终将

show

设置为

true

。

由于该结构之前的两行代码已经：

1. 调用函数
2. 切换状态值

那么你就不需要这个结构的其余部分了。 目前还不清楚你从哪里得到这个或者你期望它做什么以及为什么。 但 is 所做的就是明确始终将

show

设置为

true

。