Effacer un champ de saisie avec Reactjs?
Je suis en utilisant une variable ci-dessous.
var newInput = {
title: this.inputTitle.value,
entry: this.inputEntry.value
};
Il est utilisé par mon champs de saisie.
<input type="text" id="inputname" className="form-control" ref={el => this.inputTitle = el} />
<textarea id="inputage" ref={el => this.inputEntry = el} className="form-control"></textarea>
<button className="btn btn-info" onClick={this.sendthru}>Add</button>
Une fois que j'ai activer {this.sendthru}
je veux effacer mon champs de saisie. Cependant, je ne suis pas sûr de savoir comment le faire.
Également, comme indiqué dans cet exemple, il a été souligné à moi que je devrais utiliser le ref
propriété pour les valeurs d'entrée. Ce que je ne sais pas est ce que signifie exactement pour avoir {el => this.inputEntry = el}
. Quelle est la signification de el
dans cette situation?
source d'informationauteur Jason Chen | 2016-08-02
Vous devez vous connecter pour publier un commentaire.
Supposons que vous avez fait le " il " de la liaison de 'sendThru".
Les fonctions ci-dessous efface les champs de saisie lorsque la méthode est déclenchée.
Refs peut être écrite comme une fonction inline expression:
où
el
se réfère à la composante.Lorsque les références sont écrits comme ci-dessus, à Réagir en voit une autre fonction de l'objet à chaque fois donc à chaque mise à jour, réf sera appelée avec la valeur null immédiatement avant d'être appelé à l'instance de composant.
Lire plus à ce sujet ici.
Déclarer la valeur de l'attribut de balise d'entrée (j'.e
value= {this.state.name}
) et si vous voulez effacer cette entrée vale, vous devez utiliserthis.setState({name : ''})
PFB code de travail pour votre référence :
Je ne suis pas vraiment sûr de la syntaxe {el => ce.inputEntry = el}, mais lors de l'effacement d'un champ de saisie vous permet d'assigner un ref, comme vous l'avez mentionné.
Puis dans le onClick fonctionner après que vous avez fini d'utiliser la valeur d'entrée, il suffit d'utiliser...
Modifier
Fait l' {el => ce.inputEntry = el} est le même que ce que je crois. Peut-être que quelqu'un peut me corriger. La valeur de el doit être transmis à partir de quelque part, pour agir à titre de référence.
La façon dont j'ai effacé mon formulaire de saisie de valeurs pour ajouter un id de ma balise form.
Puis, quand je handleSubmit je l'appelle.clearForm()
Dans le clearForm fonction j'utilise ensuite le document.getElementById("myForm").reset();