React Modal开关或切换步骤时如何清空残留表单状态

状态残留问题来自两个核心原因：

• React-Bootstrap的Modal组件默认仅通过CSS控制显隐，不会卸载内部的表单、输入框元素，组件内部状态会持续保留
• 你仅手动重置了自行声明的useState状态，没有同步清空react-hook-form托管的表单值，部分输入框为非受控模式，状态更新不会同步清空DOM显示值

1. 补全状态重置逻辑，同步清空react-hook-form表单值 #

首先从手机号对应的useForm实例中解构出reset方法，用于清空托管的表单值和校验状态：

const {
  register: register2,
  handleSubmit: handleSubmit2,
  formState: { errors: errors2 },
  reset: resetMobileForm // 新增解构reset方法
} = useForm({mode: "onChange",});

修改Modal打开/关闭的方法，每次触发时重置所有关联状态：

// 关闭Modal时重置
const handleClose = () => {
  setShow(false);
  setShowOtpInput(false);
  // 补全重置逻辑
  setNumber("");
  setOTP("");
  setCounter(59);
  setOtpVerificationResult(false);
  setPostVerificationMessage("");
  setMobileNumberInput(true);
  resetMobileForm(); // 清空react-hook-form存储的手机号、校验错误
};

// 打开Modal时重置
const handleShow = () => {
  // 先重置所有状态再打开
  setNumber("");
  setOTP("");
  setCounter(59);
  setOtpVerificationResult(false);
  setPostVerificationMessage("");
  setMobileNumberInput(true);
  setShowOtpInput(false);
  resetMobileForm();
  setShow(true);
};

2. 修复OTP输入框残留问题 #

你之前的代码中OTP输入框没有绑定value属性，属于非受控组件，调用setOTP("")时不会同步清空输入框的显示内容，需要将其改为受控组件：

{/* 给OTP输入框绑定value属性，和状态关联 */}
<input 
  className="input-sbj" 
  maxLength="6" 
  value={OTP}
  onChange={(e) => setOTP(e.target.value)}
/>

同时修正编辑手机号的方法逻辑，避免状态类型不匹配、状态翻转不同步的问题：

const onClickEditMobileNo = () => {
  setShowOtpInput(false); // 直接设置明确值，不要用!otpInput避免异步状态不同步
  setOtpVerificationResult(false); // 统一传布尔值，不要传空字符串导致类型异常
  setOTP("");
  setMobileNumberInput(true);
};

3. （一劳永逸方案）通过key强制Modal内容重挂载 #

如果不想手动维护大量重置逻辑，可以给Modal内部的内容容器绑定和显隐状态关联的key，每次Modal打开时key变化，React会自动卸载旧组件、重新挂载全新的组件实例，所有状态自动回到初始值，从根源避免残留：

<Modal show={show} onHide={handleClose} backdrop="static">
  <Modal.Header
    style={{
      backgroundImage: "linear-gradient(180deg , #3f55c4 , #95a4f0",
    }}
    closeButton>
  </Modal.Header>
  {/* 内容区绑定key，每次Modal打开/关闭时自动重挂载 */}
  <div key={show ? "modal-open" : "modal-close"}>
    {/* 原有Collapse、Modal.Body内的所有业务代码全部移到此处 */}
  </div>
</Modal>

使用该方案后可以省略大部分手动重置状态的代码，不会出现漏重置的问题。

• 状态变量要保持类型一致，比如otpVerificationResult初始值为布尔值false，后续更新时不要传入字符串、数字等其他类型值，否则会导致Collapse组件显隐判断异常
• 所有需要通过状态控制显示值的输入框，必须绑定value属性关联对应状态，否则状态更新不会同步到输入框显示上

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