React 表单中输入框失焦问题的根源与解决方案

在 React 中构建登录表单时，若发现用户每次输入后输入框立即失去焦点（即光标消失、无法连续输入），这通常不是 Chakra UI 组件本身的缺陷，而是表单事件处理逻辑不完整所致。核心问题在于：将 Button 的 type="submit" 与未绑定 onSubmit 处理函数的 结合使用，会触发浏览器原生表单提交——导致页面刷新或组件重新挂载，从而使所有输入框强制失焦。

import { Button, Input, FormControl, FormLabel } from "@chakra-ui/react";
import React, { useState } from "react";

export default function Login() {
  const [formData, setFormData] = useState({ email: "", password: "" });
  const [isLoading, setIsLoading] = useState(false);
  const { email, password } = formData;

  const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    setFormData((prev) => ({
      ...prev,
      [e.target.name]: e.target.value,
    }));
  };

  const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault(); // ✅ 关键：阻止页面刷新/重载
    console.log("Form submitted:", { email, password });

    setIsLoading(true);
    try {
      // 模拟 API 调用（如 userLogin）
      await new Promise(resolve => setTimeout(resolve, 1500));
      // 登录成功逻辑：跳转、存储 token 等
    } catch (err) {
      console.error("Login failed", err);
    } finally {
      setIsLoading(false);
    }
  };

  const SubmitButton = () => (
    <Button
      type="submit"
      mt={4}
      isLoading={isLoading}
      loadingText="Signing in"
      isDisabled={!email || password.length < 8}
      width="full"
    >
      Login to your account
    </Button>
  );

  return (
    <form onSubmit={handleSubmit}> {/* ✅ 必须包裹 form 标签并绑定 onSubmit */}
      <FormControl isRequired mb={4}>
        <FormLabel>Email</FormLabel>
        <Input
          name="email"
          type="email"
          placeholder="Enter your email"
          value={email}
          onChange={handleChange}
        />
      </FormControl>

      <FormControl isRequired mb={6}>
        <FormLabel>Password</FormLabel>
        <Input
          name="password"
          type="password"
          placeholder="Enter password (min. 8 chars)"
          value={password}
          onChange={handleChange}
        />
      </FormControl>

      <SubmitButton />
    </form>
  );
}

⚠️ 常见错误与注意事项

• 错误模式：直接在 div 中放置 type="submit" 按钮（如原始代码）→ 浏览器找不到所属 ，部分环境会向上冒泡至最近
或触发全局提交，造成不可预测失焦；
• 状态更新时机：确保 onChange 使用函数式更新（setFormData(prev => {...})），避免因异步渲染导致状态滞后；
• 禁用按钮逻辑：推荐将 isDisabled 条件统一放在按钮层（而非条件渲染不同 ），提升可维护性与无障碍支持；
• Chakra 特性提示： 和 不仅增强语义化，还能配合 isInvalid / errorBorderColor 实现错误反馈，但不替代 e.preventDefault() 的必要性。

只要三者齐备，无论使用 Chakra、Mantine 还是原生 HTML，都能稳定保持输入焦点，为用户提供流畅的交互体验。