Chame várias funções onClick ReactJS

116

Eu sei em vanilla js, podemos fazer

onclick="f1();f2()"

Qual seria o equivalente para fazer duas chamadas de função onClick no ReactJS?

Eu sei que chamar uma função é assim:

onClick={f1}

javascript reactjs

— user2554585
fonte

Muito simples: passe uma função que chama as duas funções, exatamente como faria com ele.onclick = ...ou addEventListener.

— Felix Kling

No caso de sua 1ª função ser setState e você precisar ter certeza de que isso está acontecendo / levado em consideração antes da 2ª função ser executada, você achará este post bastante útil: medium.com/better-programming/…

— Nasia Makrygianni

218

Envolva suas duas + chamadas de função em outra função / método. Aqui estão algumas variantes dessa ideia:

1) Método separado

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

ou com classes ES6:

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

2) Inline

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

ou ES6 equivalente:

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

— Rob M.
fonte

5

Ou menos ideal:onclick={function() { f1(); f2(); }}

— Felix Kling

47

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

— Alejandro Silva

2

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

— Vadorequest

2

e se o primeiro for assíncrono ... quero que o segundo seja executado apenas depois que o primeiro for concluído com sucesso

— Ratnabh kumar rai

1

@Ratnabhkumarrai é uma outra preocupação que não está relacionada ao React. É tudo sobre async em JS e Promisesprovavelmente é a resposta que você estava procurando.

— Emile Bergeron

11

Talvez você possa usar a função de seta (ES6 +) ou a declaração de função simples e antiga.

Tipo de declaração de função normal ( não ES6 + ):

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

Função anônima ou tipo de função de seta ( ES6 + )

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

O segundo é o caminho mais curto que conheço. Espero que ajude você!

— Nikolas Freitas Sr. Nik
fonte

6

Chamando várias funções em onClick para qualquer elemento, você pode criar uma função de invólucro, algo assim.

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

Essas funções podem ser definidas como um método na classe pai e, em seguida, chamadas a partir da função de invólucro.

Você pode ter o elemento principal que causará o onChange como este,

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

— Ashish Singh
fonte

0

isso onclick={()=>{ f1(); f2() }}me ajudou muito se eu quisesse duas funções diferentes ao mesmo tempo. Mas agora eu quero criar um gravador de áudio com apenas um botão. Portanto, se eu clicar primeiro, quero executar o StartFunction f1()e se clicar novamente, quero executar o StopFunction f2().

Como vocês percebem isso?

— Laura
fonte

Que tal uma função com gerador? Você pode decidir com uma variável que muda dentro de uma condição que tem uma função depois dela, então você chama a função que deseja com rendimento

— Nikolas Freitas Sr. 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 Sr. Nik

0

Você pode usar aninhado.

Existem duas funções, uma é openTab()e outra é closeMobileMenue(). Em primeiro lugar, chamamos openTab()e chamamos outra função interna 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