this.deleteRow(id, e)}" 2. Passer par "{this.deleteRow.bind(this, id)}" ."/> this.deleteRow(id, e)}" 2. Passer par "{this.deleteRow.bind(this, id)}" .">

Maison  >  Article  >  interface Web  >  Comment passer un objet événement en réaction

Comment passer un objet événement en réaction

藏色散人
藏色散人original
2020-12-09 09:45:482737parcourir

Méthodes pour transmettre des objets d'événement dans React : 1. Utilisez "{(e) => this.deleteRow(id, e)}" pour transmettre "{this.deleteRow.bind(this) , id)}" méthode.

Comment passer un objet événement en réaction

L'environnement d'exploitation de ce tutoriel : système Windows7, version React17.0.1, ordinateur Dell G3.

Recommandé : "Tutoriel de base JavaScript"

Transmettre les paramètres (objets d'événement) au gestionnaire d'événements

Passer au function Paramètres supplémentaires : Les deux méthodes suivantes

<button onClick={(e) => this.deleteRow(id, e)}>Delete Row</button>
<button onClick={this.deleteRow.bind(this, id)}>Delete Row</button>

Les deux méthodes ci-dessus sont équivalentes et sont implémentées respectivement via les fonctions fléchées et Function.prototype.bind.

Dans les deux exemples ci-dessus, le paramètre e en tant qu'objet d'événement React sera transmis comme deuxième paramètre. Grâce aux fonctions fléchées, l'objet événement doit être transmis explicitement, mais via la liaison, l'objet événement et d'autres paramètres seront transmis implicitement.

Il est à noter que lors de la transmission de paramètres à la fonction d'écoute via la méthode bind, pour la fonction d'écoute définie dans le composant de classe, l'objet événement e doit être classé après les paramètres transmis, par exemple :

class Popper extends React.Component{
    constructor(){
        super();
        this.state = {name:&#39;Hello world!&#39;};
    }
    
    preventPop(name, e){    //事件对象e要放在最后
        e.preventDefault();
        alert(name);
    }
    
    render(){
        return (
            <div>
                <p>hello</p>
                {/* Pass params via bind() method. */}
                <a href="https://reactjs.org" onClick={
                this.preventPop.bind(this,this.state.name)
                }>Click</a>
            </div>
        );
    }
}

Pour plus de connaissances sur la programmation, veuillez visiter : Apprendre la programmation ! !

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Déclaration:
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn