将数据从数据库写入使用 react-hook-form 处理的输入

Question

我有一个像这样的大表格，有多个像这样的输入（没有显示所有，因为没有必要）。我正在使用 React Hook 表单库处理数据。

  const {register, reset} = useForm();

  return (
         <input
           {...register("name")}
           type="text"
           value={product.name}
           placeholder="Nombre Producto"
         />
         <input
           {...register("regular_price")}
           type="number"
           defaultValue={product.regular_price}
           placeholder="precio regular"
         />
   )

可以看到每个产品都有一个默认值，就是我设置的数据从数据库出来的状态。

当我单击一个时，我的表格中填满了我要编辑的产品的数据。问题是它只填充一次输入。在我进行重置（）后，所有输入都变为空白，并且不再填充。

在没有 onChange 的情况下使输入“填充”我的数据库中的值的最佳方法是什么？

希望你能帮助我。提前致谢！

Answer 1

解决方案是在我单击产品时使用重置并将 api 中的值设置为我的表单值，如下所示：

    useFormProps.reset({
      available_colors: producto.available_colors,
      available_sizes: producto.available_sizes,
      categories: producto.categories,
      description: producto.description,
      featuredImage: producto.featuredImage,
      freeShipping: producto.freeShipping,
      images: producto.images,
      is_published: producto.is_published,
      name: producto.name,
      price: producto.price,
      regular_price: producto.regular_price,
      sale_price: producto.sale_price,
      short_description: producto.short_description,
      sku: producto.sku,
      status: producto.status,
      stock_quantity: producto.stock_quantity,
    })

将数据从数据库写入使用 react-hook-form 处理的输入

Write data from database to inputs handled with react-hook-form

reactjs

react-hooks

react-hook-form