Cómo borrar valores de entrada de forma dinámica en 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.

Supongamos que su aplicación tiene formas dinámicas como esta:

import React from "react"; import ReactDOM from "react-dom"; import Cart from "./Cart"; import "./styles.css"; class App extends React.Component { constructor(props) { super(props); this.state = { Items: [ { name: "item1", description: "item1", group: "groupA", dtype: "str" }, { name: "item2", description: "item2", group: "groupA", dtype: "str" }, { name: "item3", description: "item3", group: "groupB", dtype: "str" }, { name: "item4", description: "item4", group: "groupB", dtype: "str" } ], itemvalues: [{}] }; this.onChangeText = this.onChangeText.bind(this); this.handleReset = this.handleReset.bind(this); this.handleSubmit = this.handleSubmit.bind(this); this.findFieldIndex = this.findFieldIndex.bind(this); this.trimText = this.trimText.bind(this); } onChangeText = e => { const valuesCopy = [...this.state.itemvalues]; //debugger; // get data-group value const itemvalue = e.target.dataset.group; if (!valuesCopy[0][itemvalue]) { valuesCopy[0][itemvalue] = []; } const itemvalues = valuesCopy[0][itemvalue]; const index = this.findFieldIndex(itemvalues, e.target.name); if (index  { return array.findIndex(item => item[name] !== undefined); }; trimText(str) { return str.trim(); } handleReset = () => { this.setState({ itemvalues: [{}] }); }; handleSubmit = () => { console.log(this.state.itemvalues); }; render() { return (  ); } } ReactDOM.render(, document.getElementById("root")); 
import React from "react"; import Form from "./Form"; const Cart = props => { return ( Submit Reset ); }; export default Cart; 
import React from "react"; const Form = props => { return ( {props.Items.map((item, index) => (  props.onChangeText(e)} key={index} /> ))} ); }; 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 lograste que funcionara.

En handleReset, puede itemvaluesvolver a un estado nulo cuando se presiona el botón "Restablecer":

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

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

Ya ha 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 todas las entradas

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

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

document.querySelectorAll('input')devuelve a NodeList, que es un poco diferente a una matriz, por lo que no puede usar ningún método de matriz útil en ella.

Para convertirlo en una matriz, pase document.querySelectorAll('input')a Array.from():

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

Ahora todo lo que tienes que hacer es recorrer cada una de las entradas y establecer su valueatributo en una cadena vacía. El forEachmétodo 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 "Restablecer", el valor de cada entrada también se borra: