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:

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;
Cart.js
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;
Form.js

As caixas de entrada (input) são renderizadas na página assim:

image-56

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

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