OnClick ReactJS'de birden çok işlevi çağırın

119

Vanilyalı js biliyorum, yapabiliriz

onclick="f1();f2()"

ReactJS'de onClick iki işlev çağrısı yapmanın eşdeğeri nedir?

Bir işlevi çağırmanın şöyle olduğunu biliyorum:

onClick={f1}

javascript reactjs

— user2554585
kaynak

Çok basit: tıpkı ele.onclick = ...veya ile yapacağınız gibi, iki işlevi çağıran bir işlevi iletin addEventListener.

— Felix Kling

1. işleviniz setState ise ve 2. işlev çalışmadan önce bunun gerçekleştiğinden / dikkate alındığından emin olmanız gerekiyorsa, bu gönderiyi

— Nasia Makrygianni

220

İki + işlev çağrınızı başka bir işlev / yöntemle sarın. İşte bu fikrin birkaç çeşidi:

1) Ayrı yöntem

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

veya ES6 sınıfları ile:

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

2) Satır içi

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

veya ES6 eşdeğeri:

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

— Rob M.
kaynak

5

Ya da daha az optimal:onclick={function() { f1(); f2(); }}

— Felix Kling

47

Veya ES6onclick={()=>{ f1(); f2() }}

— Alejandro Silva

2

Veya cjsx'te:onClick={ () => f1(); f2() }

— Vadorequest

2

peki ya birincisi eşzamansızsa .. ikincisinin ancak birincisi başarıyla tamamlandıktan sonra yürütülmesini istiyorum

— Ratnabh kumar rai

1

@Ratnabhkumarrai, React ile ilgisi olmayan tamamen başka bir endişe. Her şey JS'de eşzamansız ile ilgili ve Promisesmuhtemelen aradığınız yanıt bu.

— Emile Bergeron

12

Belki ok işlevini (ES6 +) veya basit eski işlev bildirimini kullanabilirsiniz.

Normal işlev bildirim türü ( ES6 + ):

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

Anonim işlev veya ok işlevi türü ( ES6 + )

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

İkincisi, bildiğim en kısa yol. Umarım size yardımcı olur!

— Nikolas Freitas Bay Nik
kaynak

7

Herhangi bir öğe için onClick'te birden fazla işlevi çağırarak, bunun gibi bir sarmalayıcı işlevi oluşturabilirsiniz.

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

Bu işlevler, ana sınıfta bir yöntem olarak tanımlanabilir ve ardından sarmalayıcı işlevinden çağrılabilir.

OnChange'e neden olacak ana öğeye şu şekilde sahip olabilirsiniz,

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

— Ashish Singh
kaynak

0

onclick={()=>{ f1(); f2() }}Aynı anda iki farklı işlev istiyorsam bu bana çok yardımcı oldu. Ama şimdi tek tuşla bir ses kayıt cihazı oluşturmak istiyorum. Yani, önce tıklarsam StartFunction'ı çalıştırmak istiyorum f1()ve tekrar tıklarsam StopFunction'ı çalıştırmak istiyorum f2().

Bunu nasıl anlıyorsunuz?

— Laura
kaynak

Jeneratörlü bir işlev hakkında bilgi sahibi misiniz? Kendisinden sonra bir işlevi olan bir koşulda değişen bir değişkenle karar verebilirsiniz, sonra istediğiniz işlevi verimle çağırırsınız

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

0

İç içe kullanabilirsiniz.

Biri openTab()ve bir diğeri çekme işlevi vardır closeMobileMenue(), Öncelikle openTab()içeride başka bir işlevi çağırır ve çağırırız 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
kaynak