Artigo original: How to Clear Input Values of Dynamic Form in React
Há muito que se deve considerar ao trabalhar com uma aplicação em React, especialmente quando o assunto são os formulários. Mesmo que você consiga criar um botão de envio e atualizar o state de sua aplicação do jeito que deseja, limpar os formulários pode ser difícil.
Digamos que sua aplicação tenha formulários dinâmicos, assim:
As caixas de entrada (input) são renderizadas na página assim:
Quando um usuário insere texto em uma das caixas de entrada, ele é salvo no state da aplicação assim:
Itemvalues:
0:
groupA:
item1: itemvalue1
item2: itemvalue2
groupB:
item3: itemvalue3
item4: itemvalue4
É um pouco complicado, mas você conseguiu fazer funcionar.
Em handleReset
, você consegue definir os itemvalues
de volta ao state nulo (null) quando o botão "Reset" é pressionado:
handleReset = () => {
this.setState({
itemvalues: [{}]
});
};
O problema é que o texto não é limpo de todas as caixas de entrada:
Você já tratou do armazenamento do texto no state, então aí vai uma forma simples de limpar o texto de todas as caixas de entrada.
Como limpar os valores de todas as entradas
Na parte superior do handleReset
, use document.querySelectorAll('input')
para selecionar todos os elementos input da página:
handleReset = () => {
document.querySelectorAll('input');
this.setState({
itemvalues: [{}]
});
};
document.querySelectorAll('input')
retorna uma NodeList
, o que é um pouco diferente de um array, o que torna impossível usar qualquer método de array neste caso.
Para transformar a NodeList em um array, passe document.querySelectorAll('input')
para Array.from()
:
handleReset = () => {
Array.from(document.querySelectorAll('input'));
this.setState({
itemvalues: [{}]
});
};
Agora, tudo o que você precisa fazer é iterar por cada uma das entradas e definir seu atributo value
como uma string vazia. O método forEach
é um bom candidato para isso:
handleReset = () => {
Array.from(document.querySelectorAll("input")).forEach(
input => (input.value = "")
);
this.setState({
itemvalues: [{}]
});
};
Agora, quando o usuário pressionar o botão "Reset", o valor de cada caixa de entrada também estará limpo: