Як очистити вхідні значення динамічної форми в 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: [{}] }); };

Тепер, коли користувач натискає кнопку "Скинути", значення кожного вводу теж очищається: