我有一个表单，但这些按钮上的功能不起作用。我正在使用 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
尝试以下其中一项？
<button type="button" onClick={login}>Submit</button>
<button type="button" onClick={() => login()}>Submit</button>
既然你使用 React，你应该使用状态来管理你的表单数据。
您的按钮应该是
onClick={login}onClick={login()}loginconst { useState } = React;
function Example() {
// Set your state
const [ form, setForm ] = useState({name:'', surname:'', email:''});
// When the button is clicked do your axios
// process (but here I'm just logging the form data)
function login() {
console.log(form);
}
// When an input value is changed grab its name and value
// and update the form state object
function handleChange(e) {
const { name, value } = e.target;
setForm(prev => ({ ...prev, [name]: value }));
}
// Make sure you give your inputs names, assign the
// handleClick function to the onClick handler, and
// make your inputs controllable by assigning their
// values to their value contained in state
return (
<form>
<input
name="name"
value={form.name}
onChange={handleChange}
placeholder="Insert Your Name"
/>
<input
name="surname"
value={form.surname}
onChange={handleChange}
placeholder="Insert Your Surname"
/>
<input
name="email"
value={form.value}
onChange={handleChange}
placeholder="Insert your Email"
/>
<div className="formButtons">
<button type="button" onClick={login}>Submit</button>
</div>
</form>
);
}
const node = document.getElementById('root');
const root = ReactDOM.createRoot(node);
root.render(<Example />);<script src="https://cdnjs.cloudflare.com/ajax/libs/react/18.2.0/umd/react.development.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/18.2.0/umd/react-dom.development.min.js"></script>
<div id="root"></div>