React中Input组件onBlur事件逻辑异常问题求助

核心问题分析 #

1. showSecondInput 是布尔类型状态，但你在 handleOTP 里错误地给它赋值了对象，导致后续 {showSecondInput && ...} 永远为真（对象属于真值），所以OTP框无法隐藏。
2. 清空email时没有同步更新showSecondInput状态，仅依赖onBlur触发逻辑不够及时。

修复后的代码 #

状态逻辑代码修改

const [user, update_user] = useState({
  user_name: "",
  email: "",
  clearUser: false,
  clearEmail: false,
});

const clearValue = (key, show) => {
  update_user({ ...user, [key]: "", [show]: false });
  // 清空email时同步隐藏OTP框
  if (key === "email") {
    setShowSecondInput(false);
  }
};

const [showSecondInput, setShowSecondInput] = useState(false);

const handleOTP = (e) => {
  const { name: key, value } = e.target;
  if (key === "email") {
    // 根据email是否有内容决定显示/隐藏OTP框
    setShowSecondInput(!!value);
  }
};

const handleChange = (event) => {
  const { name: key, value } = event.target;
  let updatedUser;

  if (value) {
    if (key === "user_name") {
      updatedUser = { ...user, [key]: value, clearUser: true };
    } else if (key === "email") {
      updatedUser = { ...user, [key]: value, clearEmail: true };
    }
  } else {
    updatedUser = { ...user, [key]: "", clearUser: false, clearEmail: false };
    // 清空email时同步隐藏OTP框
    if (key === "email") {
      setShowSecondInput(false);
    }
  }
  update_user(updatedUser);
};

组件代码无需修改（保持原代码即可）

修复说明 #

• 把handleOTP里的setShowSecondInput改为根据email输入框的value判断，用!!value把内容转为布尔值（有内容为true，空为false）。
• 在clearValue和handleChange的清空分支里，主动判断如果是email字段，就设置showSecondInput为false，确保清空后立即隐藏OTP框。
• 修正了之前错误地将布尔状态赋值为对象的问题，让showSecondInput始终保持布尔类型，保证渲染判断逻辑正确。

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