React重置密码模态框点击按钮后替换为成功弹窗问题求助

问题场景 #

开发登录/注册/重置密码表单时，点击重置密码模态框的提交邮箱按钮后，期望用成功提示模态框替换当前的重置密码表单，但实际效果是成功提示显示在原表单下方。

核心问题 #

原代码中，成功提示组件是直接追加在表单内容末尾（{showMessage && <MessageContent />}），并未隐藏原表单的输入框和按钮，导致两者同时显示。

解决方法 #

通过条件渲染实现表单区域与成功提示区域的互斥显示：当showMessage为false时显示重置密码表单；当showMessage为true时隐藏表单，仅显示成功提示。

修改后的ForgotPassword组件代码 #

import { useState } from "react";
import { updatePasswordFields } from "../constants/formFields";
import FormAction from "./FormAction";
import Input from "./Input";
import MessageContent from "./Message";

const fields = updatePasswordFields;
let fieldsState = {};
// 修正原代码赋值错误：避免将field.id强制设为空字符串
fields.forEach((field) => (fieldsState[field.id] = ""));

export default function ForgotPassword() {
  const [resetPasswordState, setResetPasswordState] = useState(fieldsState);
  const [showMessage, setShowMessage] = useState(false);
  
  const handleChange = (e) =>
    setResetPasswordState({
      ...resetPasswordState,
      [e.target.id]: e.target.value,
    });
    
  const handleSubmit = (e) => {
    e.preventDefault();
    setShowMessage(true);
  };

  return (
    <form className="mt-8 space-y-6" onSubmit={handleSubmit}>
      <div>
        {/* 仅当未触发提示时，渲染重置密码表单 */}
        {!showMessage && (
          <>
            {fields.map((field) => (
              <div key={field.id}>
                <label>{field.labelText}</label>
                <Input
                  handleChange={handleChange}
                  value={resetPasswordState[field.id]}
                  labelText={field.labelText}
                  labelFor={field.labelFor}
                  id={field.id}
                  name={field.name}
                  type={field.type}
                  isRequired={field.isRequired}
                  placeholder={field.placeholder}
                />
              </div>
            ))}
            <FormAction handleSubmit={handleSubmit} text="Update Password" />
          </>
        )}
        
        {/* 触发提示时，渲染成功提示组件 */}
        {showMessage && <MessageContent />}
      </div>
    </form>
  );
}

额外修正说明 #

原代码初始化fieldsState时存在语法错误：fieldsState[(field.id = "")]会强制将field.id设为空字符串，改为fieldsState[field.id] = ""才能正确根据字段ID初始化状态。

效果说明 #

修改后，点击提交按钮后原表单的输入框和按钮会被隐藏，成功提示组件将占据原表单位置，实现"替换"模态框内容的预期效果。

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