React中点击Modal关闭按钮后如何重置弹窗内输入状态？

• 手机号输入残留：手机号输入框通过react-hook-form的register2注册，表单值由RHF内部维护，仅清空自定义的number状态不会清除RHF存储的表单值；且Modal关闭时未卸载组件，输入框DOM保留了历史值
• OTP输入残留：OTP输入框仅绑定了onChange事件更新OTP状态，未绑定value属性关联状态，属于半受控组件，执行setOTP("")时无法同步更新输入框DOM的实际内容
• 原有重置逻辑覆盖不全，关闭Modal、切换输入页时未同步重置RHF表单状态、校验提示、倒计时等关联状态

1. 引入RHF表单重置方法 #

修改Modal内使用的useForm解构，拿到内置的reset方法：

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

2. 把OTP输入框改为完全受控组件 #

给OTP输入框补全value属性绑定，保证状态变更时DOM同步更新：

<input 
  className="input-sbj" 
  maxLength="6" 
  value={OTP} // 新增该行
  onChange={(e) => setOTP(e.target.value)}
/>

3. 统一Modal关闭/打开的重置逻辑 #

把所有状态重置逻辑收敛到handleClose方法，打开Modal前先执行全量重置，保证每次打开都是初始状态：

const handleClose = () => {
  setShow(false);
  setShowOtpInput(false);
  // 重置所有关联状态
  setNumber("");
  setOTP("");
  setMobileNumberInput(true);
  setPostVerificationMessage("");
  setOtpVerificationResult(false);
  setCounter(59);
  // 重置RHF内部存储的手机号值和校验状态
  resetModalForm();
};

const handleShow = () => {
  handleClose(); // 打开前先重置所有状态
  setShow(true);
};

4. 修正编辑手机号的切换逻辑 #

去掉原来的取反切换写法，明确设置页面状态，避免状态判断异常：

const onClickEditMobileNo = () => {
  setShowOtpInput(false);
  setOTP("");
  setOtpVerificationResult(false);
  setPostVerificationMessage("");
  setMobileNumberInput(true);
};

5. 调整主表单提交逻辑 #

打开Modal时直接调用封装好的handleShow方法，复用重置逻辑：

const onSubmit = (data) => {
  data["district"] = districtName;
  data["state"] = stateName;
  if (verifyOTPFlag && isValid) {
    handleShow();
  } 
};

修改完成后，无论是关闭后重新打开Modal，还是点击编辑手机号切回号码输入页，所有历史输入值、校验提示都会被自动清空，不会出现残留。

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