Hogyan törölhető a dinamikus forma beviteli értéke a React-ben

Sokat kell figyelembe venni a React alkalmazáson való munka során, különösen akkor, ha azok űrlapokat tartalmaznak. Még akkor is, ha létrehozhat egy beküldési gombot, és az alkalmazás állapotát a kívánt módon frissíti, az űrlapok törlése nehéz lehet.

Tegyük fel, hogy alkalmazásának ilyen dinamikus formái vannak:

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; 

És az egyszerű beviteli mezők renderelve jelennek meg az oldalon:

Amikor a felhasználó szöveget ír be az egyik beviteli mezőbe, az ilyen csoportokban kerül mentésre az alkalmazás állapotába:

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

Elég bonyolult, de sikerült ezt működtetni.

Az handleReset, akkor tudja beállítani itemvaluesvissza null állapotba, amikor a „Reset” gomb megnyomásakor:

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

De a probléma az, hogy a szöveg nem törlődik az összes beviteli mezőből:

Már kezelte a tényleges szöveg állapotban való tárolását, így itt egy egyszerű módja annak, hogy törölje a szöveget az összes beviteli mezőből.

Az összes bemenet értékének törlése

A tetején handleResethasználja document.querySelectorAll('input')az oldal összes beviteli elemének kiválasztásához:

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

document.querySelectorAll('input')a-t ad vissza NodeList, ami kissé eltér a tömbtől, ezért nem használhat rajta hasznos tömb-metódust.

Tömbbé alakításához adja document.querySelectorAll('input')át Array.from():

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

Most már csak annyit kell tennie, hogy végig kell ismételni az egyes bemeneteket, és az valueattribútumát üres karakterláncra kell állítani . A forEachmódszer erre jó jelölt:

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

Most, amikor a felhasználó megnyomja a "Reset" gombot, minden bemenet értéke törlődik: