e.preventDefault()在next.js上不起作用？

bbuxkriu 于 2023-10-18 发布在其他

关注(0)|答案(1)|浏览(117)

大家好，我是react.js和next.js的新手，我试图从表单中粘贴一些数据并在控制台中显示，但一旦我使用e.preventDefault（），我甚至无法提交表单。有没有更好的方法来做我想做的事情？在我看来，我选择了更简单的方法。

import Header from '../components/header'
import Navbar from '../components/navbar'
import React, { useState } from 'react'



export default function Home({data}) {
  
  
  const [form, setForm] = useState({})

const saveMovie = e =>{
    e.preventDefault()
    console.log("Why i can't see you?")
    console.log(form) // not showing also 
  }  


  return (
    <div>

    { /* header */ }
    <Header />

    {/* Navbar */}
    <Navbar />

    {/*Liste des films */}

          
<form className="form p-10 md:w-2/3 lg:w-1/2 mx-auto rounded" onSubmit={ saveMovie }>
     <div className="shadow">
       <div className="flex items-center bg-regalblue rounded-t-lg border-blue-500 border">
         <label  className="w-20 text-right mr-8 p-4 text-white">Titre</label>
         <input  onChange={e=> setForm({...form, title: e.target.value})} type="text" name="title" id="title" placeholder="Entrez le titre du film" className="flex-1 p-4 pl-0 bg-transparent placeholder-gray-600  outline-none text-white overflow-ellipsis overflow-hidden"/>
       </div>
       <div className="flex items-center bg-regalblue  rounded-t-lg border-blue-500 border">
         <label className="w-20 text-right p-4 mr-8 text-white">Année</label>
         <input  onChange={e=> setForm({...form, year: +e.target.value})} type="text" name="year" id="year" placeholder="Entrez l'année" className="flex-1  p-4 pl-0 bg-transparent placeholder-gray-600 outline-none text-white overflow-ellipsis overflow-hidden"/>
       </div>    
        <div className="flex items-center bg-regalblue rounded-t-lg border-blue-500 border">
         <label  className="w-20 text-right mr-8 p-4 text-white">slug</label>
         <input  onChange={e=> setForm({...form, slug: e.target.value})} type="text" name="slug" id="slug" placeholder="Entrez le slug ici" className="flex-1 p-4 pl-0 bg-transparent placeholder-gray-600  outline-none text-white overflow-ellipsis overflow-hidden"/>
       </div>       
       <div className="flex items-center bg-regalblue rounded-t-lg border-blue-500 border">
         <label  className="w-20 text-right mr-8 p-4 text-white">description</label>
         <textarea onChange={e=> setForm({...form, description: e.target.value})}  type="textarea" name="description" id="description" placeholder="Entrez la description" className="flex-1 p-4 pl-0 bg-transparent placeholder-gray-600  outline-none text-white overflow-ellipsis overflow-hidden"/>
       </div>
     </div>
     <button type="submit" className="bg-regalblue hover:bg-gray-900 block w-full rounded-md border py-4 text-white font-bold shadow">Envoyer le formulaire </button>
</form>

      </div>
  )
}

next.js

来源：https://stackoverflow.com/questions/71897492/e-preventdefault-not-working-on-next-js

1条答案

按热度按时间

jchrr9hc1#

下面是我的代码，它也不会调用提交。我甚至尝试重新安装nextjs，但没有工作：

"use client"

import { useRouter } from "next/navigation"
import { useState } from "react"

export default function CreateForm() {
    
    const handleSubmit = async (e) => {
        e.preventDefault();
       
        console.log('submit')
    }

    return (
        <form onSubmit={handleSubmit} className="w-1/2">
            
            <button
                type="submit"
            >
                sendit
            </button>
        </form>
    )
}

赞(0）回复(0）举报 2023-10-18

我来回答

e.preventDefault()在next.js上不起作用？

1条答案

相关问题

热门标签

最新问答