Reagieren - ein Eingabewert nach Form Clearing einreichen

Question

Hallo zusammen Stackoverflowers,

ich mit einem ziemlich dummen Problem dargestellt habe. Ich bin gerade dabei, meine erste React-Anwendung zu erstellen, und ich habe ein kleines Problem entdeckt, bei dem ich meinen Eingabewert nicht löschen kann, nachdem ich ein Formular abgeschickt habe. A versuchte dieses Problem zu googlen, fand hier ähnliche Threads, aber ich konnte das nicht lösen. Ich möchte nicht den Zustand 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 eine Fehlermeldung "Kann Eigenschaft 'Wert' von undefined nicht festlegen".

Ich würde jede Hilfe appreaciate. Danke im Voraus! :)

Mein Code:

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; 

Answer 1

Sie haben eine kontrollierte Komponente, wobei input Wert von this.state.city bestimmt wird. Sobald Sie Ihre Daten übermittelt haben, müssen Sie Ihren Status löschen, wodurch Ihre Eingaben automatisch gelöscht werden.

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

Answer 2

Da Sie Eingabefeld ist ein gesteuertes Element, können Sie nicht direkt in das Eingabefeld Wert ändern, ohne den Zustand zu ändern.

Auch in

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

this.mainInput bezieht sich nicht die Eingabe seit mainInput ein id ist, müssen Sie mit dem Eingang eines ref angeben

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

In Ihrem aktuellen Zustand ist der beste Weg um den Zustand zu löschen, um den Eingangswert zu löschen

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

Wie immer, wenn Sie aus irgendeinem Grunde immer noch den Wert im Zustand halten wollen, auch wenn das Formular abgeschickt wird, würden Sie lieber den Eingang

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

unkontrollierten machen und den Wert im Zustand onChange und onSubmit klar die Eingabe mit ref

aktualisieren

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

Answer 3

this.mainInput zeigt eigentlich nichts. Da Sie eine gesteuerte Komponente verwenden (dh der Wert des Eingangs wird von dem Zustand erhalten wird) Sie this.state.city auf null gesetzt werden:

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

Answer 4

In Ihrer onHandleSubmit-Funktion stellen Sie Ihren Zustand zu {city: ''} wieder wie folgt aus:

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