next.js 在Reactjs中找不到名称'handleSubmit'

gywdnpxw 于 2023-02-04 发布在 React

关注(0)|答案(2)|浏览(125)

我正在处理Reactjs和nextjs，现在我正在尝试“验证表单”，但我得到以下错误找不到名称'handleSubmit'现在我正在使用以下代码，但不为我工作

import Head from 'next/head'
import Image from 'next/image'
import { Inter } from '@next/font/google'
import styles from '@/styles/Home.module.css'
const inter = Inter({ subsets: ['latin'] })
import { useForm } from "react-hook-form";
const checkauth=()=>
{
 alert('Hello world');
}
export default function Home() {
 return (
   <>
   <div className="container">
 <div className="screen">
   <div className="screen__content">
     <form className="login" onSubmit={handleSubmit(checkauth)}>
       <div className="login__field">
         <i className="login__icon fas fa-user" />
         <input
           type="text"
           className="login__input"
           placeholder="User name / Email"
         />
       </div>
       <div className="login__field">
         <i className="login__icon fas fa-lock" />
         <input
           type="password"
           className="login__input"
           placeholder="Password"
         />
       </div>
       <button className="button login__submit">
         <span className="button__text">Log In Now</span>
         <i className="button__icon fas fa-chevron-right" />
       </button>
     </form>
       </div>
    </div>
</div>

   </>
 )
}

next.js

来源：https://stackoverflow.com/questions/75335493/cannot-find-name-handlesubmit-in-reactjs

2条答案

按热度按时间

8ehkhllq1#

看起来您正在尝试使用handleSubmit函数，但该函数尚未定义。请在Home组件内从useForm析构该函数。
下面是一个示例代码：

import { useForm } from "react-hook-form";

export default function Home() {
 const { handleSubmit } = useForm();

const checkauth = (data) => {
 alert("Hello world");
};

 return (
   <div className="container">
     <div className="screen">
       <div className="screen__content">
         <form className="login" onSubmit={handleSubmit(checkauth)}>
           <div className="login__field">
             <i className="login__icon fas fa-user" />
             <input
               type="text"
               className="login__input"
               placeholder="User name / Email"
             />
           </div>
           <div className="login__field">
             <i className="login__icon fas fa-lock" />
             <input
               type="password"
               className="login__input"
               placeholder="Password"
             />
           </div>
           <button className="button login__submit">
             <span className="button__text">Log In Now</span>
             <i className="button__icon fas fa-chevron-right" />
           </button>
         </form>
       </div>
     </div>
   </div>
 );
}

阅读react-hook-form文档

赞(0）回复(0）举报 2023-02-04

qlckcl4x2#

必须从useForm获取handleSubmit函数

const { handleSubmit } = useForm()

现在，要调用它，请执行以下操作

onSubmit={() => handleSubmit(checkauth)}

赞(0）回复(0）举报 2023-02-04

我来回答

next.js 在Reactjs中找不到名称'handleSubmit'

2条答案

相关问题

热门标签

最新问答