Как да изчистите входните стойности на динамичната форма в 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')връща a 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: [{}] }); };

Сега, когато потребителят натисне бутона "Нулиране", стойността на всеки вход също се изчиства: