我如何重置所有输入字段的反应？

Question

我在我的项目中使用了 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(); 。我怎样才能重置所有输入字段？请如果你知道这一点，说点什么。提前致谢...

Answer 1

您可以使用从 useForm()

返回的重置钩子重置整个表单或部分字段

  const { register, handleSubmit, reset } = useForm();

  const onSubmit = (data) => {
    //...
    reset();
  };

Have a look at the documentation here

Answer 2

使用 react-hook-form、

重置表单数据

首先，从 react-hook-form 导入重置模块，如下所示

const { register, handleSubmit, reset } = useForm();

然后使用复位模块

const onSubmit = (data) =>{
...
reset() // Reset All field
reset({"itemName": "item"}) // Reset with values
}

我如何重置所有输入字段的反应？

How can i reset react form all input field?

javascript

node.js

reactjs

react-hooks

react-forms