Τρόπος εκκαθάρισης τιμών εισαγωγής δυναμικής φόρμας στο React

Υπάρχουν πολλά που πρέπει να λάβετε υπόψη όταν εργάζεστε σε μια εφαρμογή React, ειδικά όταν περιλαμβάνουν φόρμες. Ακόμα κι αν μπορείτε να δημιουργήσετε ένα κουμπί υποβολής και να ενημερώσετε την κατάσταση της εφαρμογής σας με τον τρόπο που θέλετε, η εκκαθάριση των φορμών μπορεί να είναι δύσκολη.

Ας υποθέσουμε ότι η εφαρμογή σας έχει δυναμικές φόρμες όπως αυτή:

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; 

Και απλά πλαίσια εισαγωγής αποδίδονται στη σελίδα:

Όταν ένας χρήστης εισάγει κείμενο σε ένα από τα πλαίσια εισαγωγής, αποθηκεύεται στην κατάσταση εφαρμογής σε ομάδες όπως αυτό:

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

Είναι αρκετά περίπλοκο, αλλά καταφέρατε να το πετύχετε.

Στο handleReset, μπορείτε να itemvaluesεπιστρέψετε σε μηδενική κατάσταση όταν πατήσετε το κουμπί "Επαναφορά":

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

Αλλά το πρόβλημα είναι ότι το κείμενο δεν διαγράφεται από όλα τα πλαίσια εισαγωγής:

Έχετε ήδη χειριστεί την αποθήκευση του πραγματικού κειμένου στην πολιτεία, οπότε εδώ είναι ένας απλός τρόπος για να διαγράψετε το κείμενο από όλα τα πλαίσια εισαγωγής.

Πώς να διαγράψετε τις τιμές όλων των εισόδων

Στο επάνω μέρος handleReset, χρησιμοποιήστε document.querySelectorAll('input')για να επιλέξετε όλα τα στοιχεία εισαγωγής στη σελίδα:

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

document.querySelectorAll('input')επιστρέφει ένα NodeList, το οποίο είναι λίγο διαφορετικό από έναν πίνακα, οπότε δεν μπορείτε να χρησιμοποιήσετε χρήσιμες μεθόδους πίνακα σε αυτόν.

Για να το μετατρέψετε σε πίνακα, μεταβείτε document.querySelectorAll('input')στο Array.from():

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

Τώρα το μόνο που έχετε να κάνετε είναι να επαναλάβετε κάθε είσοδο και να ορίσετε το valueχαρακτηριστικό του σε μια κενή συμβολοσειρά. Η forEachμέθοδος είναι ένας καλός υποψήφιος για αυτό:

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

Τώρα, όταν ένας χρήστης πατήσει το κουμπί "Επαναφορά", διαγράφεται και η τιμή κάθε εισόδου: