Chiama più funzioni suClick ReactJS

116

Lo so in vanilla js, che possiamo fare

onclick="f1();f2()"

Quale sarebbe l'equivalente per effettuare due chiamate di funzione onClick in ReactJS?

So che chiamare una funzione è così:

onClick={f1}

javascript reactjs

— user2554585
fonte

Molto semplice: passa una funzione che chiama le due funzioni, proprio come faresti con ele.onclick = ...o addEventListener.

— Felix Kling,

Nel caso in cui la tua prima funzione sia setState e devi assicurarti che ciò avvenga / preso in considerazione prima che la seconda funzione venga eseguita, troverai questo post molto utile: medium.com/better-programming/…

— Nasia Makrygianni

218

Avvolgi le tue due + chiamate di funzione in un'altra funzione / metodo. Ecco un paio di varianti di quell'idea:

1) Metodo separato

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

o con classi ES6:

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

2) In linea

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

o equivalente ES6:

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

— Rob M.
fonte

5

O meno ottimale:onclick={function() { f1(); f2(); }}

— Felix Kling

47

O in ES6onclick={()=>{ f1(); f2() }}

— Alejandro Silva

2

O in cjsx:onClick={ () => f1(); f2() }

— Vadorequest

2

e se il primo fosse asincrono ... voglio che il secondo venga eseguito solo dopo che il primo è stato completato con successo

— Ratnabh kumar rai

1

@Ratnabhkumarrai questa è tutta un'altra preoccupazione che non è correlata a React. Riguarda l'asincronia in JS e Promisesprobabilmente sono la risposta che stavi cercando.

— Emile Bergeron

11

Forse puoi usare la funzione freccia (ES6 +) o la semplice vecchia dichiarazione di funzione.

Tipo di dichiarazione di funzione normale ( non ES6 + ):

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

Funzione anonima o tipo di funzione freccia ( ES6 + )

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

La seconda è la strada più breve che io conosca. Spero ti aiuti!

— Nikolas Freitas Sig. Nik
fonte

6

Chiamando più funzioni su onClick per qualsiasi elemento, puoi creare una funzione wrapper, qualcosa di simile.

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

Queste funzioni possono essere definite come un metodo sulla classe genitore e quindi chiamate dalla funzione wrapper.

Potresti avere l'elemento principale che causerà l'onChange in questo modo,

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

— Ashish Singh
fonte

0

questo onclick={()=>{ f1(); f2() }}mi ha aiutato molto se desidero due diverse funzioni contemporaneamente. Ma ora voglio creare un registratore audio con un solo pulsante. Quindi, se faccio clic prima, voglio eseguire StartFunction f1()e se faccio di nuovo clic, voglio eseguire StopFunction f2().

Come ve ne rendete conto ragazzi?

— Laura
fonte

Che ne dici di una funzione con un generatore? Puoi decidere con una variabile che cambia all'interno di una condizione che ha una funzione dopo di essa, quindi chiami la funzione che desideri con rendimento

— Nikolas Freitas Mr 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

Puoi usare annidato.

Ci sono funzioni di traino una è openTab()e un'altra è closeMobileMenue(), in primo luogo chiamiamo openTab()e chiamiamo un'altra funzione all'interno 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
fonte