Kako očistiti ulazne vrijednosti dinamičkog oblika u Reactu

Puno je toga što treba razmotriti prilikom rada na React aplikaciji, posebno kada uključuju obrasce. Čak i ako uspijete stvoriti gumb za slanje i ažurirati stanje aplikacije onako kako želite, brisanje obrazaca može biti teško.

Recimo da vaša aplikacija ima ovakve dinamičke obrasce:

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; 

I jednostavni okviri za unos prikazuju se na stranici:

Kada korisnik unese tekst u jedan od okvira za unos, on se sprema u stanje aplikacije u grupama poput ove:

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

Prilično je komplicirano, ali uspjeli ste to postići.

U handleReset, možete se itemvaluesvratiti na null stanje kada se pritisne gumb "Reset":

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

Ali problem je što se tekst ne briše iz svih okvira za unos:

Već ste riješili spremanje stvarnog teksta u stanje, pa je ovdje jednostavan način brisanja teksta iz svih okvira za unos.

Kako obrisati vrijednosti svih ulaza

Na vrhu handleReset, korištenje document.querySelectorAll('input')za odabir svih ulaznih elemenata na stranici:

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

document.querySelectorAll('input')vraća a NodeList, koji se malo razlikuje od niza, pa na njemu ne možete koristiti nikakve korisne metode niza.

Da biste ga pretvorili u niz, prijeđite document.querySelectorAll('input')na Array.from():

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

Sada sve što morate učiniti je prelistati svaki od ulaza i postaviti njegov valueatribut na prazan niz. forEachMetoda je dobar kandidat za to:

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

Sada kada korisnik pritisne gumb "Reset", briše se i vrijednost svakog unosa: