O Senhor ensinou a limpar o formulario e eu fiz assim:
.then(() => {
setNomePrato('');
setDescricao('');
setTag('');
setRestaurante('');
setImagem(null);
alert('Prato cadastrado com sucesso!')
})
.catch(erro => console.log(erro))Mesmo colocando setImagem como null no formulario, na parte do botao, ainda aparece o nome do ultimo arquivo que eu escolhi. Tem como limpar isso tambem?
Poderia nos repassar o reposítório para dar uma olhada melhor no código ?
Para limpar o input do tipo "file", eu precisei tornar ele um input controlável pelo React. Fiz isso usando o hook useRef, seguindo as instruções neste post do StackOverflow, adaptando para o TypeScript.
Segue como ficou meu código:
const imagemInput = useRef<HTMLInputElement>(null);
// dentro do then de http.request
.then(() => {
//...
setImagem(null);
if(imagemInput.current){
// como o input agora é controlável, isso irá forçar o rerender do input
imagemInput.current.value = '';
}
}
// adicionando o hook ao input
<input type="file" onChange={selecionaArquivo} ref={imagemInput} />