web-dev-qa-db-fra.com

Effacer un champ de saisie avec Reactjs?

J'utilise une variable ci-dessous.

var newInput = {
   title: this.inputTitle.value,
   entry: this.inputEntry.value    
};

Ceci est utilisé par mes 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" />
<button className="btn btn-info" onClick={this.sendthru}>Add</button>

Une fois que j'active {this.sendthru} Je veux effacer mes champs de saisie. Cependant, je ne sais pas comment faire.

En outre, comme indiqué dans cet exemple, il m'a été signalé que je devrais utiliser la propriété ref pour les valeurs d'entrée. Ce que je ne sais pas, c'est ce que cela signifie exactement d'avoir {el => this.inputEntry = el}. Quelle est la signification de el dans cette situation?

javascriptreactjs
26
Jason Chen

Permettez-moi de supposer que vous avez effectué la fonction "this" de la fonction "sendThru".

La fonction ci-dessous efface les champs de saisie lorsque la méthode est déclenchée.

sendThru() {
    this.inputTitle.value = "";
    this.inputEntry.value = "";
}

Les références peuvent être écrites comme expression de fonction inline:

ref={el => this.inputTitle = el}

où el fait référence au composant.

Lorsque les références sont écrites comme ci-dessus, React voit un objet fonction différent à chaque fois, ainsi à chaque mise à jour, la référence sera appelée avec null immédiatement avant d'être appelée avec l'instance du composant.

En savoir plus à ce sujet ici .

33
Galeel Bhasha

Déclarez l'attribut value de la balise d'entrée (c'est-à-dire value= {this.state.name}) Et si vous souhaitez effacer cette valeur d'entrée, vous devez utiliser this.setState({name : ''})

Code de travail PFB pour votre référence:

<script type="text/babel">
    var StateComponent = React.createClass({
        resetName : function(event){
            this.setState({
                name : ''
            });
        },
        render : function(){
            return (
                <div>
                    <input type="text" value= {this.state.name}/>
                    <button onClick={this.resetName}>Reset</button>
                </div>
            )
        }
    });
    ReactDOM.render(<StateComponent/>, document.getElementById('app'));
</script>
18
Satheesh

Je ne suis pas vraiment sûr de la syntaxe {el => this.inputEntry = el}, mais lorsque vous effacez un champ de saisie, vous affectez une référence comme vous l'avez mentionné.

<input type="text" ref="someName" />

Puis, dans la fonction onClick après avoir utilisé la valeur d'entrée, utilisez simplement ...

this.refs.someName.value = '';

Éditer

En fait, le {el => this.inputEntry = el} est identique à celui que je crois. Peut-être que quelqu'un peut me corriger. La valeur pour el doit être passée de quelque part pour servir de référence.

function (el) {
    this.inputEntry = el;
}
10
sean le roy