Cómo borrar entradas en campos de valores de formularios dinámicos en React

Original article: How to Clear Input Values of Dynamic Form in React

Hay mucho que considerar cuando se trabaja en una aplicación React, especialmente cuando se trata de formularios. Incluso si puede crear un botón de envío y actualizar el estado de su aplicación de la manera que desee, borrar los formularios puede ser difícil.

Digamos que su aplicación tiene formularios dinámicos como este:

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;

Y los cuadros de entrada simples se representan en la página:

Cuando un usuario ingresa texto en uno de los cuadros de entrada, se guarda en el estado de la aplicación en grupos como este:

Itemvalues:
  0:
    groupA: 
            item1: itemvalue1
            item2: itemvalue2
    groupB: 
            item3: itemvalue3
            item4: itemvalue4

Es bastante complicado, pero conseguiste que funcionara.

En handleReset, puedes restablecer los valores de itemvalues a un estado null cuando se presiona el botón "Reset":

handleReset = () => {
  this.setState({
    itemvalues: [{}]
  });
};

Pero el problema es que el texto no se borra de todos los cuadros de entrada:

Ya has manejado el almacenamiento del texto real en el estado, así que aquí hay una forma sencilla de borrar el texto de todos los cuadros de entrada.

Cómo borrar los valores de todos los campos de entrada

En la parte superior de handleReset, use document.querySelectorAll('input') para seleccionar todos los campos de entrada de la página:

handleReset = () => {
  document.querySelectorAll('input');
  this.setState({
    itemvalues: [{}]
  });
};

document.querySelectorAll('input') devuelve un NodeList, lo cual es un poco diferente a un arreglo, así que no puedes usar ninguno de los útiles métodos de arreglos con él.

Para convertirlo en un arreglo, pasa document.querySelectorAll('input') a Array.from():

handleReset = () => {
  Array.from(document.querySelectorAll('input'));
  this.setState({
    itemvalues: [{}]
  });
};

Ahora todo lo que tienes que hacer es iterar a través de cada una de las entradas y establecer su atributo de value a una cadena vacía. El método forEach es un buen candidato para esto:

handleReset = () => {
  Array.from(document.querySelectorAll("input")).forEach(
    input => (input.value = "")
  );
  this.setState({
    itemvalues: [{}]
  });
};

Ahora, cuando un usuario presiona el botón "Reset", el valor de cada entrada también se borra: