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

Usando o React, você pode achar mais complicado 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. Saiba 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 para 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 carrega o arquivo.

importar { useState } de"reagir";
funçãoFileUploadForm() {
const [arquivoselecionado, setarquivoselecionados] = useState(nulo);
const handleFileChange = (evento) => {
 setSelectedFile (event.target.files[0]);
 };
const handleEnviar = (evento) => {
 event.preventDefault();
 };
retornar (
 <>


"arquivoEntrada">Escolha um arquivo:</label>
"arquivo" id ="arquivoEntrada" onChange={handleFileChange} />
"enviar">Carregar</button>
 </form>
 </>
 );
}

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

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

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

importar { useState, useRef } de"reagir";
funçãoFileUploadForm() {
// ...
const arquivoRef = useRef()
retornar (
// ...
 );
}

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

"arquivoEntrada">Escolha um arquivo:</label>
 tipo="arquivo"
 id ="arquivoEntrada"
 onChange={handleFileChange}
 ref={arquivoRef}
 />
"enviar">Carregar</button>
</form>

Reagir define o atual propriedade 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 redefinir esse valor atribuindo nulo a ele.

fileRef.current.value = nulo

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

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

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 de 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 eles a oportunidade de fazer upload de outro arquivo sem precisar limpar manualmente a entrada campo.