React-hook-form 圖像處理問題

Question

我正在為我的應用程序使用 react-hook-form 並遇到以下問題。

我像這樣初始化 defaultValues

const {register, submit } = useForm({
   defaultValues : {
     image: null
}
})

我上傳圖片的輸入是這個

<label htmlFor="image">
      <span className="mt-2 text-base leading-normal">
         Upload an image
      </span>
      <input
        {...register("image")}
        type="file"
        accept="image/*"
        className="hidden"
        />
</label>

當我提交這個表單時，圖像仍然是 null，而不是像這樣的 FileList：

該錯誤是否與我在 defaultValues 上為圖像聲明的“null”值有關？ 如果是這樣，使用 react-hook-form 處理圖像的正確值是多少？

Answer 1

您可以嘗試在輸入中添加onChange道具，如下所示：

onChange={(e: React.ChangeEvent) => {e.target.files[0]}}