React.js（Next.js）表单提交问题：无法提交表单如何处理？

你的代码里checklogin函数已经能触发（alert能弹），说明表单提交绑定是有效的，目前缺的是获取输入框的值和实际的提交请求逻辑，给你两种可行方案：

方案1：用受控组件（React推荐） #

通过useState绑定输入框，实时跟踪输入内容，提交时直接用状态里的值，适合需要实时验证、动态修改的场景。

修改后的完整代码：

import { useState } from 'react';

export default function Home() {
  // 初始化表单状态
  const [formData, setFormData] = useState({
    username: '',
    password: ''
  });

  // 实时更新输入值到状态
  const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    const { id, value } = e.target;
    setFormData(prev => ({
      ...prev,
      [id]: value
    }));
  };

  const checklogin = async (e: React.FormEvent<HTMLFormElement>) => {
    e.preventDefault();
    // 这里能拿到完整的表单数据
    console.log('提交的数据:', formData);
    
    // 发送POST请求到后端接口
    try {
      const res = await fetch('/api/login', {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json',
        },
        body: JSON.stringify(formData),
      });
      
      if (res.ok) {
        const data = await res.json();
        alert('登录成功');
        // 这里加登录后的逻辑，比如跳转、存token
      } else {
        alert('账号或密码错误');
      }
    } catch (err) {
      console.error('请求失败:', err);
      alert('网络出错，请稍后再试');
    }
  };

  return (
    <form className="forms-sample" onSubmit={checklogin}>
      <div className="form-group first">
        <label htmlFor="username">Username</label>
        <input
          type="text"
          className="form-control"
          placeholder="your-email@gmail.com"
          id="username"
          value={formData.username}
          onChange={handleInputChange}
        />
      </div>
      <div className="form-group last mb-3">
        <label htmlFor="password">Password</label>
        <input
          type="password"
          className="form-control"
          placeholder="Your Password"
          id="password"
          value={formData.password}
          onChange={handleInputChange}
        />
      </div>
      <input
        type="submit"
        name="submit"
        defaultValue="Log In"
        className="btn btn-block btn-primary"
      />
    </form>
  );
}

方案2：直接用FormData获取数据 #

如果是简单表单，不想写受控组件的逻辑，可以直接通过表单元素创建FormData对象，一次性获取所有输入值：

只需要修改checklogin函数：

const checklogin = async (e: React.FormEvent<HTMLFormElement>) => {
  e.preventDefault();
  // 从表单元素创建FormData
  const form = e.currentTarget;
  const formData = new FormData(form);
  
  // 转成对象方便查看
  const formObj = Object.fromEntries(formData.entries());
  console.log('提交的数据:', formObj);
  
  // 发送请求，FormData不需要手动设置Content-Type
  try {
    const res = await fetch('/api/login', {
      method: 'POST',
      body: formData,
    });
    
    if (res.ok) {
      alert('登录成功');
    } else {
      alert('登录失败');
    }
  } catch (err) {
    console.error('请求失败:', err);
    alert('网络出错');
  }
};

可选：Next.js后端API示例 #

如果需要写后端处理登录请求，在pages/api/login.ts（Pages Router）或者app/api/login/route.ts（App Router）里添加：

// Pages Router 示例
import type { NextApiRequest, NextApiResponse } from 'next';

export default async function handler(
  req: NextApiRequest,
  res: NextApiResponse
) {
  if (req.method !== 'POST') {
    return res.status(405).json({ message: '仅支持POST请求' });
  }
  
  const { username, password } = req.body;
  // 这里替换成你的实际验证逻辑，比如查数据库
  if (username === 'test' && password === '123456') {
    res.status(200).json({ success: true, message: '登录成功' });
  } else {
    res.status(401).json({ success: false, message: '账号或密码错误' });
  }
}

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