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 handleReset
er du i stand til at sætte itemvalues
tilbage 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
handleReset
Brug 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 value
attribut til en tom streng. Den forEach
metode 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:
