我為我的專案使用了 React Hooks Form 庫。但是提交資料后我無法重置。下面，我添加了我的代碼。
const AddItem = () => {
const { register, handleSubmit } = useForm();
const onSubmit = (data) =>{
const url = `http://localhost:5000/products`;
fetch(url,{
method: 'POST',
headers: {
'content-type': 'application/json'
},
body: JSON.stringify(data)
})
.then(res=>res.json())
.then(data=>{
toast("successfully added product");
});
};
return (
<div className='container border-2'>
<PageTitle title={"Add Product"}></PageTitle>
<div className="">
<h4 className='mt-5'>Add Items</h4><hr />
<form onSubmit={handleSubmit(onSubmit)} className="d-flex flex-column w-50 mx-auto">
<input className='mb-3 p-1' type="text" name="itemName" placeholder='Item Name' {...register("itemName", { required: true })}/>
<input className='mb-3 p-1' type="text" name="imgLink" placeholder='Image URL' {...register("imgLink", { required: true })}/>
<input className='mb-3 p-1' type="textarea" name="description" placeholder='Product Description' {...register("description", { required: true })}/>
<input className='mb-3 p-1' type="number" name="price" placeholder='Product Price' {...register("price", { required: true })}/>
<input className='mb-3 p-1' type="number" name="quantity" placeholder='Quantity' {...register("quantity", { required: true })}/>
<input className='mb-3 p-1' type="text" name="supplierName" placeholder='Supplier Name' {...register("supplierName", { required: true })}/>
<input type="submit" value="Add Item" className='btn btn-primary' />
</form>
</div>
<ToastContainer />
</div>
);
};
如果沒有 React hooks 表單，我曾經重置表單data.target.reset(); 。如何重置所有輸入欄位？如果你知道這一點，請說點什么。提前致謝...
uj5u.com熱心網友回復：
要使用 react-hook-form 重置表單資料，
- 首先，從 react-hook-form 匯入重置模塊，如下所示
const { register, handleSubmit, reset } = useForm();
- 然后使用復位模塊
const onSubmit = (data) =>{
...
reset() // Reset All field
reset({"itemName": "item"}) // Reset with values
}
uj5u.com熱心網友回復：
您可以使用從回傳的重置掛鉤重置整個表單或部分欄位useForm()
const { register, handleSubmit, reset } = useForm();
const onSubmit = (data) => {
//...
reset();
};
在這里查看檔案
轉載請註明出處，本文鏈接：https://www.uj5u.com/gongcheng/468391.html
標籤：javascript 节点.js 反应 反应钩子 反应形式
上一篇：從輸入中獲取影像