英文:
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)}>
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论