Artigo original: https://www.freecodecamp.org/news/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:
import React from "react";
import Form from "./Form";
const Cart = props => {
return (
<div>
<Form Items={props.Items} onChangeText={props.onChangeText} />
<button onClick={props.handleSubmit}>Submit</button>
<button onClick={props.handleReset}>Reset</button>
</div>
);
};
export default Cart;
import React from "react";
const Form = props => {
return (
<div>
{props.Items.map((item, index) => (
<input
name={item.name}
placeholder={item.description}
data-type={item.dtype}
data-group={item.group}
onChange={e => props.onChangeText(e)}
key={index}
/>
))}
</div>
);
};
export default Form;
As caixas de entrada (input) são renderizadas na página assim:
![image-56](https://www.freecodecamp.org/portuguese/news/content/images/2022/04/image-56.png)
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:
![Peek-2020-06-16-21-32](https://www.freecodecamp.org/portuguese/news/content/images/2022/04/Peek-2020-06-16-21-32.gif)
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:
![Peek-2020-06-16-21-42](https://www.freecodecamp.org/portuguese/news/content/images/2022/04/Peek-2020-06-16-21-42.gif)