Appelez plusieurs fonctions surCliquez sur ReactJS

116

Je sais en vanilla js, on peut faire

onclick="f1();f2()"

Quel serait l'équivalent pour faire deux appels de fonction onClick dans ReactJS?

Je sais qu'appeler une fonction est comme ceci:

onClick={f1}

javascript reactjs

— user2554585
source

Très simple: passez une fonction qui appelle les deux fonctions, comme vous le feriez avec ele.onclick = ...ou addEventListener.

— Felix Kling du

Dans le cas où votre première fonction est setState et que vous devez vous assurer que cela se produit / pris en compte avant que la deuxième fonction ne s'exécute, vous trouverez cet article très utile: medium.com/better-programming/…

— Nasia Makrygianni

218

Enveloppez vos deux appels de fonction + dans une autre fonction / méthode. Voici quelques variantes de cette idée:

1) Méthode séparée

var Test = React.createClass({
   onClick: function(event){
      func1();
      func2();
   },
   render: function(){
      return (
         <a href="#" onClick={this.onClick}>Test Link</a>
      );
   }
});

ou avec les classes ES6:

class Test extends React.Component {
   onClick(event) {
      func1();
      func2();
   }
   render() {
      return (
         <a href="#" onClick={this.onClick}>Test Link</a>
      );
   }
}

2) en ligne

<a href="#" onClick={function(event){ func1(); func2()}}>Test Link</a>

ou équivalent ES6:

<a href="#" onClick={() => { func1(); func2();}}>Test Link</a>

— Rob M.
source

5

Ou moins optimal:onclick={function() { f1(); f2(); }}

— Felix Kling

47

Ou en ES6onclick={()=>{ f1(); f2() }}

— Alejandro Silva

2

Ou en cjsx:onClick={ () => f1(); f2() }

— Vadorequest

2

que se passe-t-il si le premier est asynchrone ... je veux que le second ne soit exécuté qu'après que le premier soit terminé avec succès

— Ratnabh kumar rai

1

@Ratnabhkumarrai c'est une toute autre préoccupation qui n'a aucun rapport avec React. Tout est asynchrone dans JS et Promisesc'est probablement la réponse que vous recherchiez.

— Emile Bergeron

11

Vous pouvez peut-être utiliser la fonction flèche (ES6 +) ou la simple déclaration de l'ancienne fonction.

Type de déclaration de fonction normale ( pas ES6 + ):

<link href="#" onClick={function(event){ func1(event); func2();}}>Trigger here</link>

Fonction anonyme ou type de fonction de flèche ( ES6 + )

<link href="#" onClick={(event) => { func1(event); func2();}}>Trigger here</link>

La seconde est la route la plus courte que je connaisse. J'espère que cela vous aide!

— Nikolas Freitas M. Nik
source

6

En appelant plusieurs fonctions sur onClick pour n'importe quel élément, vous pouvez créer une fonction wrapper, quelque chose comme ça.

wrapperFunction = () => {
    //do something
    function 1();
    //do something
    function 2();
    //do something
    function 3();
}

Ces fonctions peuvent être définies comme une méthode sur la classe parent puis appelées à partir de la fonction wrapper.

Vous pouvez avoir l'élément principal qui provoquera le onChange comme ceci,

<a href='#' onClick={this.wrapperFunction}>Some Link</a>

— Ashish Singh
source

0

cela onclick={()=>{ f1(); f2() }}m'a beaucoup aidé si je veux deux fonctions différentes en même temps. Mais maintenant, je veux créer un enregistreur audio avec un seul bouton. Donc, si je clique d'abord, je veux exécuter StartFunction f1()et si je clique à nouveau, je veux exécuter StopFunction f2().

Comment réalisez-vous cela?

— Laura
source

Pourquoi pas une fonction avec un générateur? Vous pouvez décider avec une variable qui change à l'intérieur d'une condition qui a une fonction après elle, puis vous appelez la fonction que vous voulez avec yield

— Nikolas Freitas M. Nik

const play = () => {   console.log("played");   }  const pause = () => {   console.log("paused");   }  function* audioSwitcher() {   let paused = true; 	while (true) { 		if(paused) { 			play();			 		} else { 			pause(); 		} 		 		yield paused = !paused; 	} }

— Nikolas Freitas Mr Nik

0

Vous pouvez utiliser imbriqué.

Il y a une fonction de remorquage, une openTab()et une autre closeMobileMenue(), tout d'abord, nous appelons openTab()et appelons une autre fonction à l'intérieur closeMobileMenue().

function openTab() {
    window.open('https://play.google.com/store/apps/details?id=com.drishya');
    closeMobileMenue()   //After open new tab, Nav Menue will close.  
}

onClick={openTab}

— Ankit Kumar Rajpoot
source