web-dev-qa-db-fra.com

Réagir - effacer une valeur d'entrée après la soumission du formulaire

Je suis présenté avec un problème plutôt stupide. Je suis en train de créer ma première application React et j'ai rencontré un petit problème où je ne suis pas en mesure d'effacer ma valeur d'entrée après avoir soumis un formulaire. Un essayé googler ce problème, a trouvé quelques threads similaires ici, mais je ne pouvais pas résoudre ce problème. Je ne veux PAS changer l'état de mon composant/application, juste pour changer la valeur de l'entrée en une chaîne vide. J'ai essayé d'effacer la valeur de l'entrée dans ma fonction onHandleSubmit(), mais j'ai eu une erreur:

"Impossible de définir la propriété 'valeur' ​​de non définie".

Mon composant SearchBar:

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;
javascriptformsreactjsinputsubmit
7
TommyVee

Vous avez un composant contrôlé où la valeur input est déterminée par this.state.city. Donc, une fois que vous soumettez, vous devez effacer votre état, ce qui effacera automatiquement votre saisie.

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

Étant donné que votre champ de saisie est un élément contrôlé, vous ne pouvez pas modifier directement la valeur du champ de saisie sans modifier l'état.

Aussi dans 

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

this.mainInput ne fait pas référence à l'entrée puisque mainInput est une id, vous devez spécifier une référence à l'entrée

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

Dans votre état actuel, le meilleur moyen consiste à effacer l'état pour effacer la valeur d'entrée

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

Cependant, si pour une raison quelconque vous souhaitez conserver la valeur dans l'état même si le formulaire est soumis, vous préféreriez que l'entrée soit non contrôlée.

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

et mettez à jour la valeur dans l'état onChange et onSubmit, effacez l'entrée à l'aide de ref

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

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

Cela dit, je ne vois aucun intérêt à maintenir l’état inchangé. La première option devrait donc être la voie à suivre.

7
Shubham Khatri

this.mainInput ne pointe réellement vers rien. Puisque vous utilisez un composant contrôlé (la valeur de l'entrée est obtenue à partir de l'état), vous pouvez définir this.state.city sur null:

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

Dans votre fonction onHandleSubmit, définissez votre état sur {city: ''} comme suit:

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