Cách useRef Hook của React có thể giúp bạn đặt lại trường nhập liệu sau khi tải lên thành công

Khi sử dụng React, bạn có thể thấy khó đặt lại một số trường nhập liệu hơn những trường khác. Đặc biệt, đầu vào tệp có thể có vấn đề, nhưng đây là những trường chính xác mà bạn sẽ muốn đặt lại sau khi tải tệp lên thành công.

Rất may, hook useRef cung cấp một giải pháp đơn giản. Tìm hiểu cách bạn có thể xóa trường nhập tệp bằng móc useRef sau khi tải lên thành công.

Tạo một biểu mẫu tải lên đơn giản

Để trình bày cách đặt lại trường nhập tệp bằng useRef, bạn sẽ tạo một biểu mẫu React đơn giản với trường nhập chấp nhận hình ảnh.

Đầu tiên, hãy thiết lập một giá trị trạng thái có tên là SelectedFile bằng cách sử dụng hook useState để theo dõi tệp đã chọn. Trạng thái ban đầu cho selectFile sẽ là null vì người dùng chưa chọn tệp nào.

Ngoài ra, hãy tạo một hàm xử lý có tên handleFileChange để cập nhật trạng thái Tệp đã chọn khi người dùng chọn một tệp. Thêm chức năng thứ hai có tên handleSubmit, chức năng này sẽ tải trạng thái lên khi người dùng tải tệp lên.

 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>
    </>
  );
}
 

Khi quá trình tải tệp lên hoàn tất, ứng dụng sẽ xóa trường nhập liệu mà bạn sẽ tìm hiểu cách thực hiện bên dưới.

Xóa trường nhập sau khi tải tệp lên

Nếu đây là trường văn bản, bạn có thể xóa đầu vào bằng cách đặt trạng thái thành chuỗi trống:

 setSelectedFile("")
 

Nhưng điều này sẽ không hoạt động với trường nhập loại tài liệu. Việc đặt biến trạng thái selectField thành một chuỗi trống chỉ xóa dữ liệu tệp khỏi trạng thái chứ không xóa khỏi DOM. Điều này là do trạng thái này không tham chiếu giá trị đầu vào.

Để xóa giá trị đầu vào, bạn phải tạo một tham chiếu đến tệp đầu vào bằng móc useRef. Trong ví dụ này, nhập useRef từ React và tạo một đối tượng ref có tên là fileRef:

 import { useState, useRef } from "react";
function FileUploadForm() {
  
  const fileRef = useRef()
  return (
    
  );
}
 

Sau đó tham khảo ref trong trường đầu vào như hình dưới đây.

 <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>
 

Phản ứng thiết lập hiện hành thuộc tính của biến ref thành phần tử DOM, nghĩa là bạn có thể lấy giá trị tệp như sau:

 fileRef.current.value
 

Sau đó, bạn có thể đặt lại giá trị này bằng cách gán null cho nó.

 fileRef.current.value = null
 

Đóng gói cái này trong một hàm có tên handleReset như thế này:

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

Sau đó, gọi chức năng này khi bạn tải lên thành công một tệp để xóa trường nhập liệu.

Tại sao bạn nên đặt lại các trường nhập sau khi tải tệp lên

Thông thường, bạn nên đặt lại trường nhập liệu sau khi tải tệp lên thành công. Điều này là do nó cung cấp cho người dùng một dấu hiệu rõ ràng rằng quá trình tải lên của họ đã thành công và cũng cung cấp cho họ cơ hội tải lên một tệp khác mà không cần phải xóa trường nhập liệu theo cách thủ công.