Submit按钮无法触发JavaScript函数问题排查求助

核心问题与修复步骤 #

你的代码里有两个直接导致按钮无法触发请求的关键错误：

1. onClick事件绑定错误 #

你给Submit按钮写的是onClick={login()}，这会导致组件渲染时立即执行login函数，而非点击按钮时触发。正确写法是传递函数引用，不要加括号：

<button type="button" onClick={login}>Submit</button>

2. 表单状态未用React状态管理 #

你用普通对象formDataClass存储表单数据，React无法追踪该对象的变化，输入框内容更新不会被正确识别，最终发送请求时可能还是初始空值。需要用useState钩子管理状态：

'use client'
import React, { useState } from "react";
import axios from 'axios';

export default function Employees(){
  // 用useState初始化表单状态
  const [formData, setFormData] = useState({name:'',surname:'',email:''})

  async function login() {
    try {
      const response = await axios.post("URL", formData);
      alert(formData.name);
    } catch (error) {
      console.log(error);
    }
  }

  // 统一处理输入变更，避免重复代码
  const handleInputChange = (e) => {
    const { name, value } = e.target;
    setFormData(prev => ({ ...prev, [name]: value }));
  }

  return(
    <div className="content">
      <div><h1>欢迎使用管理系统V1.0</h1></div>
      <div className="formulary">
        <div><h3>员工表单</h3></div>
        <div>
          <form>
              {/* 给input添加name属性，配合统一处理函数 */}
              <input 
                name="name"
                onChange={handleInputChange} 
                placeholder="输入你的名字"
                value={formData.name}
              ></input>
              <input 
                name="surname"
                onChange={handleInputChange} 
                placeholder="输入你的姓氏"
                value={formData.surname}
              ></input>
              <input 
                name="email"
                onChange={handleInputChange} 
                placeholder="输入你的邮箱"
                value={formData.email}
              ></input>
              <div className="formButtons">
                <button type="button">Save</button>
                <button type="button" onClick={login}>Submit</button>
              </div>
          </form>
        </div>
      </div>
    </div>
  );
}

关于你怀疑的其他问题 #

1. 主布局的body标签问题 #

Next.js框架会自动生成页面的<body>标签，你在DashboardLayout里手动嵌套<body>会导致HTML结构无效，可能引发潜在的渲染或事件问题，建议移除布局里的<body>标签，调整后代码：

import { Inter } from "next/font/google";
import Head from 'next/head';
import "./globals.css";

const inter = Inter({ subsets: ["latin"] });

export const metadata = {
  title: "公司仪表盘",
  description: "",
};

export default function DashboardLayout({ children }) {
  return (
    <div className="mainContent">
      <Head>
        <title>{metadata.title}</title>
        <meta name="description" content={metadata.description} />
      </Head>
      <header>
        {/* 头部内容 */}
      </header>
      <div className="leftMenu">     
        <nav>
                <a href="/"><button>首页</button></a>
                <a href="/admins"><button>管理员</button></a>
                <a href="/employees"><button>员工</button></a>
                <a href="/clients"><button>客户</button></a>
                <a href="/cars"><button>车辆</button></a>
        </nav>
      </div>
      <div className="leftContent"></div>
      <div className="middleContent">{children}</div>
      <div className="rightContent"></div>
    </div>
  );
}

2. 文件命名问题 #

Next.js的组件（尤其是页面组件）建议首字母大写，比如把employees.jsx改为Employees.jsx，这符合React组件命名规范，可避免潜在的路由或渲染问题，但这不是按钮无法触发请求的直接原因。

额外建议 #

可以给表单添加onSubmit事件，配合按钮type="submit"，支持回车提交表单，增强用户体验：

<form onSubmit={(e) => {
  e.preventDefault(); // 阻止默认表单提交行为
  login();
}}>
  {/* 输入框 */}
  <button type="submit">Submit</button>
</form>

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