Sådan ryddes inputværdier for dynamisk form i reaktion

Der er meget at overveje, når du arbejder på en React-applikation, især når de involverer formularer. Selvom du er i stand til at oprette en afsendeknap og opdatere din apps tilstand, som du vil, kan det være svært at rydde formularerne.

Sig, at din ansøgning har dynamiske formularer som denne:

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; 

Og enkle indtastningsfelter gengives til siden:

Når en bruger indtaster tekst i et af inputfelterne, gemmes den i applikationstilstanden i grupper som denne:

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

Det er ret kompliceret, men det lykkedes dig at få det til at fungere.

I handleReseter du i stand til at sætte itemvaluestilbage til en null-tilstand, når der trykkes på knappen "Nulstil":

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

Men problemet er, at teksten ikke ryddes fra alle indtastningsfelterne:

Du har allerede håndteret lagring af den faktiske tekst i tilstanden, så her er en enkel måde at rydde teksten fra alle indtastningsfelter.

Sådan ryddes værdierne for alle input

handleResetBrug toppen til document.querySelectorAll('input')at vælge alle inputelementerne på siden:

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

document.querySelectorAll('input')returnerer a NodeList, som er lidt anderledes end et array, så du kan ikke bruge nogen nyttige array-metoder på det.

For at gøre det til en matrix, gå document.querySelectorAll('input')til Array.from():

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

Nu er alt hvad du skal gøre, at gentage gennem hver af indgangene og indstille dets valueattribut til en tom streng. Den forEachmetode er en god kandidat til denne:

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

Når en bruger nu trykker på knappen "Nulstil", slettes også værdien for hver indgang: