Como o gancho useRef do React pode ajudá-lo a redefinir um campo de entrada após um upload bem-sucedido

Formulários que se limpam proporcionam uma melhor experiência do usuário. Descubra como useRef pode ser um participante importante nesta parte do seu aplicativo.

Usando o React, você pode achar mais estranho redefinir alguns campos de entrada do que outros. Em particular, as entradas de arquivo podem ser problemáticas, mas esses são os campos exatos que você deseja redefinir após um upload de arquivo bem-sucedido.

Felizmente, o gancho useRef fornece uma solução simples. Aprenda como você pode limpar um campo de entrada de arquivo com o gancho useRef após um upload bem-sucedido.

Criando um formulário de upload simples

Para demonstrar como redefinir um campo de entrada de arquivo com useRef, você criará um formulário React simples com um campo de entrada que aceita uma imagem.

Primeiro, configure um valor de estado chamado selectedFile usando o gancho useState para rastrear o arquivo selecionado. O estado inicial de selectedFile será nulo, pois o usuário ainda não selecionou um arquivo.

Além disso, crie uma função de manipulador chamada handleFileChange que atualiza o estado selectedFile quando um usuário seleciona um arquivo. Adicione uma segunda função chamada handleSubmit, que deve carregar o estado quando um usuário fizer upload do arquivo.

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

Quando o upload do arquivo for concluído, o aplicativo deverá limpar o campo de entrada, o que você aprenderá a fazer a seguir.

Limpe o campo de entrada após o upload de um arquivo

Se este fosse um campo de texto, você poderia limpar a entrada definindo o estado como uma string vazia:

setSelectedFile("")

Mas isso não funcionará com um campo de entrada do tipo arquivo. Definir a variável de estado selectedField como uma string vazia apenas remove os dados do arquivo do estado e não do DOM. Isso ocorre porque esse estado não faz referência ao valor de entrada.

Para limpar o valor de entrada, você deve criar uma referência para a entrada do arquivo usando o gancho useRef. Neste exemplo, importe useRef do React e crie um objeto ref chamado fileRef:

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

Em seguida, faça referência à referência no campo de entrada conforme mostrado abaixo.

<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 define a propriedade current da variável ref para o elemento DOM, o que significa que você pode obter o valor do arquivo assim:

fileRef.current.value

Você pode então redefinir esse valor atribuindo nulo a ele.

fileRef.current.value = null

Encapsule isso em uma função chamada handleReset assim:

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

Em seguida, chame esta função quando você carregar um arquivo com sucesso para limpar o campo de entrada.

Por que você deve redefinir os campos de entrada após o upload dos arquivos

Geralmente, é uma boa prática redefinir o campo de entrada após um upload de arquivo bem-sucedido. Isso ocorre porque dá ao usuário uma indicação clara de que o upload foi bem-sucedido e também oferece a oportunidade de fazer upload de outro arquivo sem precisar limpar manualmente o campo de entrada.