Lidar com formulários é complexo. Não é atoa que existem diversas bibliotecas para isso, como o React Hook Form, Formik, Unform etc.
Se você não usa uma biblioteca para lidar com o formulário, restam duas opções: componentes controlados (com estado - useState
) ou componentes não controlados (com referência - useRef
). No caso dessa pergunta, é usada a primeira opção, então explicarei apenas ela.
Formulário com componentes controlados
Em resumo, um input
controlado tem uma cara assim:
function Form() {
const [valor, setValor] = React.useState('');
return <input onChange={(e) => setValor(e.target.value)} value={valor} />;
}
Isso envolve alguns conceitos:
- Controle do valor: O valor do
input
é controlado pelo estado (useState
). Se você não atualiza o estado, o valor doinput
não atualiza para o usuário. - Recebendo o valor: Você recebe o valor digitado pelo usuário através do evento
onChange
, acessando a propriedadetarget.value
do argumento passado como evento (no código acima,e
). - Exibindo o valor: Você passa o valor do seu estado para o
input
através da propriedadevalue
. No exemplo acima,value={valor}
.
Isso já está correto no código da pergunta. A questão é: como limpar o input
?
Uma vez que você tenha entendido como funciona o armazenamento, recebimento e exibição do valor do input
, espero que já saiba como limpar o input
: basta limpar o estado. Veja o exemplo abaixo:
function Form() {
const [valor, setValor] = React.useState('');
return (
<form>
<input onChange={(e) => setValor(e.target.value)} value={valor} />
<button onClick={() => setValor('')} type="button">Limpar</button>
</form>
);
}
ReactDOM.render(<Form /> , document.querySelector("#app"));
<script crossorigin src="https://unpkg.com/react@17/umd/react.production.min.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@17/umd/react-dom.production.min.js"></script>
<div id="app"></div>
Se você possui vários input
s, não é muito diferente do exemplo, basta limpar todos os estados:
function limparInputs() {
setInput1('');
setInput2('');
setInput3('');
}