چگونه React’s useRef Hook می تواند به شما کمک کند پس از آپلود موفقیت آمیز یک فیلد ورودی را بازنشانی کنید

فرم هایی که پس از خود پاک می شوند، تجربه کاربری بهتری را ایجاد می کنند. دریابید که چگونه userRef می تواند یک بازیکن کلیدی در این بخش از برنامه شما باشد.

با استفاده از React، ممکن است بازنشانی برخی از فیلدهای ورودی نسبت به سایرین سخت تر باشد. به طور خاص، ورودی فایل می تواند مشکل ساز باشد، با این حال این فیلدهایی هستند که می خواهید پس از آپلود موفقیت آمیز فایل، بازنشانی کنید.

خوشبختانه، قلاب useRef یک راه حل ساده ارائه می دهد. بیاموزید که چگونه می توانید پس از آپلود موفقیت آمیز، یک فیلد ورودی فایل را با قلاب useRef پاک کنید.

ایجاد یک فرم آپلود ساده

برای نشان دادن نحوه تنظیم مجدد یک فیلد ورودی فایل با useRef، یک فرم React ساده با یک فیلد ورودی که یک تصویر را می پذیرد ایجاد می کنید.

ابتدا با استفاده از قلاب useState یک مقدار حالت به نام SelectFile تنظیم کنید تا فایل انتخابی را ردیابی کنید. حالت اولیه SelectFile پوچ خواهد بود زیرا کاربر هنوز فایلی را انتخاب نکرده است.

همچنین، یک تابع کنترل کننده به نام handleFileChange ایجاد کنید که وقتی کاربر یک فایل را انتخاب می کند، وضعیت فایل انتخاب شده را به روز می کند. تابع دومی به نام handleSubmit اضافه کنید، که باید وضعیت زمانی که کاربر فایل را آپلود می‌کند، آپلود کند.

import { useState } from "react";

function FileUploadForm() {
  const [selectedFile, setSelectedFile] = useState(null);

  const handleFileChange = (event) => {
    setSelectedFile(event.target.files[0]);
  };

  const handleSubmit = (event) => {
    event.preventDefault();
  };

  return (
    <>
      <form onSubmit={handleSubmit}>
        <label htmlFor="fileInput">Choose a file:</label>
        <input type="file" id="fileInput" onChange={handleFileChange} />
        <button type="submit">Upload</button>
      </form>
    </>
  );
}

وقتی آپلود فایل کامل شد، برنامه باید فیلد ورودی را پاک کند، که در زیر نحوه انجام آن را خواهید آموخت.

پس از آپلود فایل، فیلد ورودی را پاک کنید

اگر این یک فیلد متنی بود، می‌توانید با تنظیم وضعیت روی یک رشته خالی، ورودی را پاک کنید:

setSelectedFile("")

اما این با یک فیلد ورودی از نوع فایل کار نمی کند. تنظیم متغیر حالت selectedField به یک رشته خالی فقط داده های فایل را از حالت و نه از DOM حذف می کند. این به این دلیل است که این حالت به مقدار ورودی اشاره نمی کند.

برای پاک کردن مقدار ورودی، باید با استفاده از قلاب useRef یک مرجع به ورودی فایل ایجاد کنید. در این مثال، userRef را از React وارد کنید و یک شی ref به نام fileRef ایجاد کنید:

import { useState, useRef } from "react";

function FileUploadForm() {
  // ...
  const fileRef = useRef()

  return (
    // ...
  );
}

سپس مطابق شکل زیر به ref در قسمت ورودی اشاره کنید.

<form onSubmit={handleSubmit}>
    <label htmlFor="fileInput">Choose a file:</label>

    <input
        type="file"
        id="fileInput"
        onChange={handleFileChange}
        ref={fileRef}
    />

    <button type="submit">Upload</button>
</form>

React ویژگی فعلی متغیر ref را روی عنصر DOM تنظیم می کند که به این معنی است که می توانید مقدار فایل را به این صورت دریافت کنید:

fileRef.current.value

سپس می توانید این مقدار را با اختصاص null به آن بازنشانی کنید.

fileRef.current.value = null

این را در تابعی به نام handleReset مانند این کپسوله کنید:

const handleReset = () => {
    fileRef.current.value = null;
};

سپس هنگامی که با موفقیت یک فایل را آپلود کردید، این تابع را فراخوانی کنید تا فیلد ورودی پاک شود.

چرا باید فیلدهای ورودی را پس از آپلود فایل بازنشانی کنید؟

به طور کلی، بازنشانی فیلد ورودی پس از آپلود موفقیت‌آمیز فایل، تمرین خوبی است. این به این دلیل است که به کاربر نشانه واضحی مبنی بر موفقیت آمیز بودن آپلود آنها می دهد و همچنین فرصتی را برای او فراهم می کند تا فایل دیگری را بدون نیاز به پاک کردن دستی فیلد ورودی آپلود کند.

منبع مقاله