it-swarm.com.de

Reagieren - Löschen eines Eingabewertes nach dem Senden des Formulars

Ich habe ein ziemlich dummes Problem. Ich bin gerade dabei, meine erste React-Anwendung zu erstellen, und ich bin auf ein kleines Problem gestoßen, bei dem ich meinen Eingabewert nicht löschen kann, nachdem ich ein Formular gesendet habe. Ich habe versucht, dieses Problem zu googeln. Einige ähnliche Threads wurden hier gefunden, aber ich konnte das Problem nicht lösen. Ich möchte NICHT den Status meiner Komponente/Anwendung ändern, nur um den Wert der Eingabe in eine leere Zeichenfolge zu ändern. Ich habe versucht, den Wert der Eingabe in meiner onHandleSubmit()-Funktion zu löschen, aber ich habe einen Fehler erhalten:

Msgstr "Eigenschaft 'value' von undefined kann nicht gesetzt werden".

Meine SearchBar-Komponente:

import React, { Component } from "react";

class SearchBar extends Component {
  constructor(props) {
    super(props);

    this.state = {
      city: ""
    };

    this.onHandleChange = this.onHandleChange.bind(this);
    this.onHandleSubmit = this.onHandleSubmit.bind(this);
  }

  render() {
    return (
      <form>
        <input
          id="mainInput"
          onChange={this.onHandleChange}
          placeholder="Get current weather..."
          value={this.state.city}
          type="text"
        />
        <button onClick={this.onHandleSubmit} type="submit">
          Search!
        </button>
      </form>
    );
  }

  onHandleChange(e) {
    this.setState({
      city: e.target.value
    });
  }

  onHandleSubmit(e) {
    e.preventDefault();
    const city = this.state.city;
    this.props.onSearchTermChange(city);
    this.mainInput.value = "";
  }
}

export default SearchBar;
7
TommyVee

Sie haben eine kontrollierte Komponente, bei der der input-Wert von this.state.city bestimmt wird. Nach dem Senden müssen Sie also Ihren Status löschen, wodurch Ihre Eingabe automatisch gelöscht wird.

onHandleSubmit(e) {
    e.preventDefault();
    const city = this.state.city;
    this.props.onSearchTermChange(city);
    this.setState({
      city: ''
    });
}
14
Panther

Da Ihr Eingabefeld ein kontrolliertes Element ist, können Sie den Eingabefeldwert nicht direkt ändern, ohne den Status zu ändern.

Auch in 

onHandleSubmit(e) {
    e.preventDefault();
    const city = this.state.city;
    this.props.onSearchTermChange(city);
    this.mainInput.value = "";
  }

Da this.mainInput nicht auf die Eingabe verweist, da mainInput eine id ist, müssen Sie der Eingabe einen ref zuweisen

<input
      ref={(ref) => this.mainInput= ref}
      onChange={this.onHandleChange}
      placeholder="Get current weather..."
      value={this.state.city}
      type="text"
    />

In Ihrem aktuellen Zustand ist es am besten, den Zustand zu löschen, um den Eingabewert zu löschen

onHandleSubmit(e) {
    e.preventDefault();
    const city = this.state.city;
    this.props.onSearchTermChange(city);
    this.setState({city: ""});
  }

Wenn Sie jedoch trotzdem aus irgendeinem Grund den Wert im Status beibehalten möchten, selbst wenn das Formular gesendet wird, möchten Sie die Eingabe lieber unkontrolliert machen

<input
      id="mainInput"
      onChange={this.onHandleChange}
      placeholder="Get current weather..."
      type="text"
    />

und aktualisieren Sie den Wert im Status onChange und onSubmit, um die Eingabe mit ref zu löschen.

 onHandleChange(e) {
    this.setState({
      city: e.target.value
    });
  }

  onHandleSubmit(e) {
    e.preventDefault();
    const city = this.state.city;
    this.props.onSearchTermChange(city);
    this.mainInput.value = "";
  }

Nachdem ich das gesagt habe, sehe ich keinen Sinn darin, den Zustand unverändert zu halten, also sollte die erste Option der Weg sein.

7
Shubham Khatri

this.mainInput zeigt eigentlich gar nichts. Da Sie eine kontrollierte Komponente verwenden (d. H. Der Wert der Eingabe wird aus state abgerufen), können Sie this.state.city auf null setzen:

onHandleSubmit(e) {
  e.preventDefault();
  const city = this.state.city;
  this.props.onSearchTermChange(city);
  this.setState({ city: '' });
}
3
topher

Setzen Sie in Ihrer onHandleSubmit-Funktion Ihren Status erneut auf {city: ''} wie folgt:

this.setState({ city: '' });
0
mllduran

Die obigen Antworten sind falsch, sie laufen alle bei schlechtem Wetter oder die Übermittlung ist erfolgreich ... Sie müssen eine Fehlerkomponente schreiben, die alle Fehler empfängt. Überprüfen Sie dann, ob Fehler im Status vorhanden sind. Wenn dies nicht der Fall ist, löschen Sie das Formular. ...

benutze .then ()

beispiel:

 const onSubmit =  e => {
e.preventDefault();
const fd = new FormData();
fd.append("ticketType", ticketType);
fd.append("ticketSubject", ticketSubject);
fd.append("ticketDescription", ticketDescription);
fd.append("itHelpType", itHelpType);
fd.append("ticketPriority", ticketPriority);
fd.append("ticketAttachments", ticketAttachments);
newTicketITTicket(fd).then(()=>{
  setTicketData({
    ticketType: "IT",
    ticketSubject: "",
    ticketDescription: "",
    itHelpType: "",
    ticketPriority: ""
  })
})  

};

0
Mazer Rakham