So löschen Sie Eingabewerte der dynamischen Form in React

Bei der Arbeit an einer React-Anwendung ist viel zu beachten, insbesondere wenn es sich um Formulare handelt. Selbst wenn Sie in der Lage sind, eine Schaltfläche zum Senden zu erstellen und den Status Ihrer App nach Ihren Wünschen zu aktualisieren, kann das Löschen der Formulare schwierig sein.

Angenommen, Ihre Anwendung hat dynamische Formen wie diese:

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; 

Und einfache Eingabefelder werden auf der Seite gerendert:

Wenn ein Benutzer Text in eines der Eingabefelder eingibt, wird dieser in folgenden Gruppen im Anwendungsstatus gespeichert:

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

Es ist ziemlich kompliziert, aber du hast es geschafft, das zum Laufen zu bringen.

In handleResetkönnen Sie den Nullzustand itemvalueswiederherstellen, wenn Sie auf die Schaltfläche "Zurücksetzen" klicken:

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

Das Problem ist jedoch, dass der Text nicht aus allen Eingabefeldern gelöscht wird:

Sie haben den eigentlichen Text bereits im Status gespeichert. Hier finden Sie eine einfache Möglichkeit, den Text aus allen Eingabefeldern zu löschen.

So löschen Sie die Werte aller Eingaben

An der Spitze handleReset, die Verwendung document.querySelectorAll('input')auswählen , um alle Eingabeelemente auf der Seite:

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

document.querySelectorAll('input')Gibt a zurück NodeList, was sich ein wenig von einem Array unterscheidet, sodass Sie keine nützlichen Array-Methoden verwenden können.

Um daraus ein Array zu machen, gehen Sie document.querySelectorAll('input')zu Array.from():

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

Jetzt müssen Sie nur noch alle Eingaben durchlaufen und das valueAttribut auf eine leere Zeichenfolge setzen. Die forEachMethode ist dafür ein guter Kandidat:

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

Wenn ein Benutzer nun die Schaltfläche "Zurücksetzen" drückt, wird auch der Wert jeder Eingabe gelöscht: