提交按钮不触发javascript函数

问题描述 投票:0回答:1

我有一个表单,但这些按钮上的功能不起作用。我正在使用 axios 来执行 post 请求。这与儿童布局有关吗?命名文件?我的子布局没有 body 或 main 标签吗?

主要布局

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

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

export const metadata = {
  title: "Company Dashboard",
  description: "",
};

export default function DashboardLayout({ children }) {
  return (
    <div className="mainContent">
      <Head>
        <title>{metadata.title}</title>
        <meta name="description" content={metadata.description} />
      </Head>
      <header>
        {/* Header content goes here */}
      </header>
      <body>


      <div className="leftMenu">     
        <nav>
                <a href="/"><button>Home</button></a>

                <a href="/admins"><button>Admins</button></a>

                <a href="/employees"><button>Employees</button></a>

                <a href="/clients"><button>Clients</button></a>

                <a href="/cars"><button>Cars</button></a>
        </nav>
      </div>
      <div className="leftContent"></div>
      <div className="middleContent">{children}</div>
      <div className="rightContent"></div>
      
        
      </body>
    </div>
  );
}

有问题的代码

'use client'
import React  from "react";
import axios from 'axios';



export default function employees(){

 
  const formDataClass = {name:'',surname:'',email:''}

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


    return(
     
        <div className="content">
        <div><h1>Seja Bem Vindo ao Sistema de Gestão V1.0</h1></div>
        <div className="formulary">
          <div><h3>Formulário de Empregados</h3></div>
          <div>
            <form>
                <input onChange={(e)=>formDataClass.name=e.target.value} placeholder="Insert Your Name"></input>
                <input onChange={(e)=>formDataClass.surname=e.target.value} placeholder="Insert Your Surname"></input>
                <input onChange={(e)=>formDataClass.email=e.target.value} placeholder="Insert your Email"></input>
                <div className="formButtons">
                  <button type="button">Save</button>
                  <button type="button" onClick={login()}>Submit</button>
                  
                </div>
            </form>
          </div>
        </div>

        
      </div>
    );
}

我确实尝试了一切并期望按钮能够触发 axios post

javascript reactjs function next.js axios
1个回答
0
投票

尝试以下其中一项?

<button type="button" onClick={login}>Submit</button>
<button type="button" onClick={() => login()}>Submit</button>
© www.soinside.com 2019 - 2024. All rights reserved.