React表单onSubmit事件失效，提交按钮无法点击问题求助

核心错误点修复 #

1. 请求头拼写错误
   你在fetch的headers里写了'Content Type'，正确的HTTP请求头键应该是'Content-Type'（中间是连字符而非空格）。这个错误会导致后端无法识别请求体的JSON格式，直接返回解析失败，进而让整个登录逻辑卡死。

2. JSON解析方法未调用
   const data = await response.json这里，json()是一个异步方法，必须加括号调用，否则你拿到的data是方法本身，不是解析后的JSON对象。这会导致后续data.validPass的判断永远不成立，还会引发控制台报错。

3. 按钮点击异常的额外排查点
   移除form标签后按钮能正常点击，大概率是form元素或按钮的CSS有问题：

   • 检查.login-button或button是否被设置了pointer-events: none
   • 检查是否有其他元素（比如父级div）覆盖在按钮上方（可通过浏览器开发者工具的元素选择器查看层级）
   • 确认form元素没有被设置display: none或opacity: 0这类隐藏属性

修复后的完整代码 #

import './App.css';
import { FiMail } from "react-icons/fi";
import { FiLock } from "react-icons/fi";
import profile from "./image/a.jpg";
import { useState } from 'react'

function Login() {

  const [Email, setEmail] = useState('')
  const [pass, setPassword] = useState('')

  async function loginUser (event) {
    event.preventDefault()

    try {
      const response = await fetch('http://localhost:3001/api/login', {
        method: 'POST',
        headers: {
          // 修复：Content-Type拼写正确
          'Content-Type':'application/json'
        },
        body: JSON.stringify({
          Email,
          pass,
        }),
      })

      // 修复：调用json()方法
      const data = await response.json()
      
      if(data.validPass){
        alert('Login Successful')
        window.location.href = '/Home'
      }
      else{
        alert('Login Failed')
      }

      console.log(data)
    } catch (err) {
      // 新增错误捕获，方便排查请求失败问题
      console.error('登录请求失败:', err)
      alert('登录请求出错，请检查控制台')
    }
  }

  return (
    <div className='main'>
      <div>
        <div className='imgs'>
          <div className='container-image'>
            <img src={profile} alt="profile" className='profile'/>
          </div>
        </div>

        <form onSubmit={loginUser}>
          <div className='input'>
            <div className='heard'>
              <h4>Email</h4>
            </div>
            <div className='email'>
              <FiMail/>
            </div>
            <input type="text" placeholder="Email" className="name"
            value={Email}
            onChange={(e) => setEmail(e.target.value)}
            />
          </div>

          <div className="second-input">
            <div className="heard">
              <h4>Password</h4>
            </div>
            <div className='email'>
              <FiLock/>
            </div>
            <input type="password" placeholder="password" className="name"
            value={pass}
            onChange={(e) => setPassword(e.target.value)}/>
          </div>

          <div className='login-button'>
            <button type="submit" value="Submit">Login</button>
          </div>
        </form>

      </div>
    </div>
  );
}

export default Login;

额外优化建议 #

• 给fetch请求加上try/catch捕获网络错误，方便排查问题
• 可以给表单添加字段验证（比如邮箱格式、密码长度），避免无效请求

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