Există multe de luat în considerare atunci când lucrați la o aplicație React, mai ales atunci când acestea implică formulare. Chiar dacă puteți crea un buton de trimitere și puteți actualiza starea aplicației așa cum doriți, ștergerea formularelor poate fi dificilă.

Spuneți că aplicația dvs. are forme dinamice de genul acesta:

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 < 0) {
      valuesCopy[0][itemvalue] = [
        ...itemvalues,
        { [e.target.name]: e.target.value.split(",").map(this.trimText) }
      ];
    } else {
      // update the value
      valuesCopy[0][itemvalue][index][e.target.name] = e.target.value
        .split(",")
        .map(this.trimText);
    }

    // console.log(itemsCopy);

    this.setState({ itemvalues: valuesCopy });
  };
  findFieldIndex = (array, name) => {
    return array.findIndex(item => item[name] !== undefined);
  };
  trimText(str) {
    return str.trim();
  }

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

  handleSubmit = () => {
    console.log(this.state.itemvalues);
  };

  render() {
    return (
      <Cart
        Items={this.state.Items}
        handleSubmit={this.handleSubmit}
        handleReset={this.handleReset}
        onChangeText={this.onChangeText}
      />
    );
  }
}

ReactDOM.render(<App />, document.getElementById("root"));
index.js
import React from "react";
import Form from "./Form";

const Cart = props => {
  return (
    <div>
      <Form Items={props.Items} onChangeText={props.onChangeText} />

      <button onClick={props.handleSubmit}>Submit</button>
      <button onClick={props.handleReset}>Reset</button>
    </div>
  );
};

export default Cart;
Cart.js
import React from "react";

const Form = props => {
  return (
    <div>
      {props.Items.map((item, index) => (
        <input
          name={item.name}
          placeholder={item.description}
          data-type={item.dtype}
          data-group={item.group}
          onChange={e => props.onChangeText(e)}
          key={index}
        />
      ))}
    </div>
  );
};
export default Form;
Form.js

Și casetele de intrare simple sunt redate paginii:

Cum se sterg valorile de intrare ale formei dinamice in

Când un utilizator introduce text într-una din casetele de intrare, acesta este salvat în starea aplicației în grupuri de genul acesta:

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

Este destul de complicat, dar ai reușit să faci asta.

În handleReset, poți seta itemvalues înapoi la o stare nulă atunci când butonul „Resetare” este apăsat:

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

Dar problema este că textul nu este șters din toate casetele de intrare:

Cum se sterg valorile de intrare ale formei dinamice in

V-ați ocupat deja de stocarea textului real în stare, deci iată o modalitate simplă de a șterge textul din toate casetele de introducere.

Cum să ștergeți valorile tuturor intrărilor

În partea superioară a handleReset, utilizare document.querySelectorAll('input') pentru a selecta toate elementele de intrare pe pagină:

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

document.querySelectorAll('input') returnează un NodeList, care este puțin diferit de un tablou, deci nu puteți folosi metode utile de tablou pe acesta.

Pentru a-l transforma într-o matrice, treceți document.querySelectorAll('input') la Array.from():

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

Acum tot ce trebuie să faceți este să iterați prin fiecare dintre intrări și să setați value atributul unui șir gol. forEach metoda este un candidat bun pentru aceasta:

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

Acum, când un utilizator apasă butonul „Resetare”, se șterge și valoarea fiecărei intrări:

1611933544 985 Cum se sterg valorile de intrare ale formei dinamice in