英文:
e.preventdefault() isn't working with react-hook-form
问题
我正在尝试在React中使用react-hook-form提交表单后禁用页面重新加载，然而即使使用了e.preventDefault()也会重新加载页面。我尝试在官方文档中找到解决方法，但他们只是建议使用e参数。
如何解决这个问题？我已经尝试传递事件但不起作用。
英文:
I'm trying to disable the page reload after submit a form in react using react-hook-form, however even using the e.preventDefault() the page reload. I tried to found something in the official docs but they just say to use the e param
import { useRef } from "react"import { useForm } from "react-hook-form"function NewItemModal() {const { register, handleSubmit } = useForm()function handleAddNewItem(data: Object, e?: Event) {e?.preventDefault()console.log(data)}return (<><form onSubmit={() => handleSubmit((e) => handleAddNewItem(e))} className="space-y-8"><div className='grid grid-cols-1 md:grid-cols-2 lg:grid-cols-2 place-items-center gap-y-6'><label className='space-y-1'><h4>ID:</h4><motion.input whileFocus={{ borderColor: '#FF9400' }} type="text" className='border border-raisin rounded indent-1 outline-none'{...register('item_id')} /></label><div></div><label className='space-y-1'><h4>Nome:</h4><motion.input whileFocus={{ borderColor: '#FF9400' }} type="text" className='border border-raisin rounded indent-1 outline-none'{...register('name')} /></label><label className='space-y-1'><h4>Condição:</h4><motion.input whileFocus={{ borderColor: '#FF9400' }} type="text" className='border border-raisin rounded indent-1 outline-none'{...register('condition')} /></label><label className='space-y-1'><h4>Marca:</h4><motion.input whileFocus={{ borderColor: '#FF9400' }} type="text" className='border border-raisin rounded indent-1 outline-none'{...register('brand')} /></label><label className='space-y-1'><h4>Setor:</h4><motion.input whileFocus={{ borderColor: '#FF9400' }} type="text" className='border border-raisin rounded indent-1 outline-none'{...register('sector')} /></label><label className='space-y-1'><h4>Comodatário:</h4><motion.input whileFocus={{ borderColor: '#FF9400' }} type="text" className='border border-raisin rounded indent-1 outline-none'{...register('borrower')} /></label><label className='space-y-1'><h4>Data:</h4><motion.input whileFocus={{ borderColor: '#FF9400' }} type="text" className='border border-raisin rounded indent-1 outline-none'{...register('borrowerDate')} /></label></div><div className='px-4 py-1 space-y-6 flex flex-col'><label className='space-y-3 flex flex-col items-center'><h4 className="self-start">Descrição:</h4><motion.textarea whileFocus={{ borderColor: '#FF9400' }} className='p-2 w-full h-56 outline-none border border-raisin rounded text-sm'></motion.textarea></label><div className='flex justify-end'><motion.button whileHover={{ scale: 1.03 }} type="submit" className="bg-princeton px-2 w-20 h-8 rounded border-2 border-raisin">Enviar</motion.button></div></div></form></>)}export default NewItemModal
How can i resolve this? I already tried to pass the event but it doesn't work
答案1
得分: 2
You should directly pass the return value of handleSubmit to onSubmit, without wrapping it in another arrow function. There is then no need to call event.preventDefault() manually.
<form onSubmit={handleSubmit(handleAddNewItem)}>
英文:
You should directly pass the return value of handleSubmit to onSubmit, without wrapping it in another arrow function. There is then no need to call event.preventDefault() manually.
<form onSubmit={handleSubmit(handleAddNewItem)}>
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论