Llame a múltiples funciones en Click ReactJS

116

Lo sé en vainilla js, podemos hacer

onclick="f1();f2()"

¿Cuál sería el equivalente para hacer dos llamadas de función onClick en ReactJS?

Sé que llamar a una función es así:

onClick={f1}

javascript reactjs

— usuario2554585
fuente

Muy simple: pase una función que llame a las dos funciones, tal como lo haría con ele.onclick = ...o addEventListener.

— Felix Kling

En caso de que su primera función sea setState y necesite asegurarse de que esto suceda / tenga en cuenta antes de que se ejecute la segunda función, encontrará esta publicación bastante útil: medium.com/better-programming/…

— Nasia Makrygianni

217

Envuelva sus dos + llamadas a funciones en otra función / método. Aquí hay un par de variantes de esa idea:

1) Método separado

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

o con clases ES6:

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

2) en línea

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

o equivalente a ES6:

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

— Rob M.
fuente

5

O menos óptimo:onclick={function() { f1(); f2(); }}

— Felix Kling

47

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

— Alejandro Silva

2

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

— Vadorequest

2

¿Qué pasa si el primero es asincrónico? Quiero que el segundo se ejecute solo después de que el primero se complete con éxito

— Ratnabh kumar rai

1

@Ratnabhkumarrai, esa es otra preocupación que no está relacionada con React. Se trata de async en JS y Promisesprobablemente sea la respuesta que estaba buscando.

— Emile Bergeron

11

Tal vez pueda usar la función de flecha (ES6 +) o la declaración de función antigua simple.

Tipo de declaración de función normal ( no ES6 + ):

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

Función anónima o tipo de función de flecha ( ES6 + )

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

El segundo es el camino más corto que conozco. ¡Espero que te ayude!

— Nikolas Freitas Mr Nik
fuente

6

Al llamar a múltiples funciones en onClick para cualquier elemento, puede crear una función contenedora, algo como esto.

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

Estas funciones pueden definirse como un método en la clase principal y luego llamarse desde la función contenedora.

Es posible que tenga el elemento principal que causará el onChange de esta manera,

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

— Ashish Singh
fuente

0

esto onclick={()=>{ f1(); f2() }}me ayudó mucho si quiero dos funciones diferentes al mismo tiempo. Pero ahora quiero crear una grabadora de audio con un solo botón. Entonces, si hago clic primero, quiero ejecutar StartFunction f1()y si hago clic nuevamente, quiero ejecutar StopFunction f2().

¿Cómo se dan cuenta de esto, chicos?

— Laura
fuente

¿Qué tal una función con generador? Puede decidir con una variable que cambia dentro de una condición que tiene una función después de ella, luego llama a la función que desea con rendimiento

— 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

Puede usar anidado.

Hay una función de remolque, una es openTab()y otra es closeMobileMenue(), primero llamamos openTab()y llamamos a otra función dentro 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
fuente