Olá!
Essa situação que você descreveu é comum ao lidar com inputs em React, especialmente quando se trata de inputs do tipo file ou url de imagem. A raiz do problema provavelmente está na forma como o campo de imagem está sendo manipulado no JSX.
Se o campo de imagem estiver sendo renderizado assim:
<input
type="text"
value={imagem}
onChange={(evento) => setImagem(evento.target.value)}
/>
Então, ele é um componente controlado — o React está no controle total do valor. Nesse caso, setImagem("") deveria limpar o campo sem problemas.
Contudo, se você estiver usando:
<input
type="file"
onChange={(evento) => setImagem(evento.target.files[0])}
/>
Ou se estiver usando algum componente não controlado, então limpar esse campo não funciona diretamente com setImagem(""), porque React não consegue controlar diretamente o valor de um input file ou de alguns componentes de terceiros.
Se o campo de imagem for um input do tipo text (ex: inserção de URL da imagem), e não estiver sendo limpo, confira:
- Se o valor está realmente sendo controlado com
value={imagem}. - Se não há erro de digitação ou
useState incorreto.
Se for um input do tipo file, a solução típica seria:
// Atribuir uma ref ao input
const imagemRef = useRef(null);
const aoSubmeter = (evento) => {
evento.preventDefault();
aoCadastrar({ nome, cargo, imagem, time });
setNome("");
setCargo("");
setImagem("");
setTime("");
if (imagemRef.current) {
imagemRef.current.value = ""; // limpar manualmente o campo file
}
};
E no JSX:
<input
type="file"
ref={imagemRef}
onChange={(e) => setImagem(e.target.files[0])}
/>
