Panggil beberapa fungsi di Klik ReactJS

116

Saya tahu di vanilla js, kita bisa melakukannya

onclick="f1();f2()"

Apa yang setara untuk membuat dua panggilan fungsi onClick di ReactJS?

Saya tahu memanggil satu fungsi seperti ini:

onClick={f1}

javascript reactjs

— pengguna2554585
sumber

Sangat sederhana: berikan fungsi yang memanggil kedua fungsi tersebut, seperti yang Anda lakukan dengan ele.onclick = ...atau addEventListener.

— Felix Kling

Jika fungsi pertama Anda adalah setState dan Anda perlu memastikan ini terjadi / diperhitungkan sebelum fungsi ke-2 berjalan, Anda akan menemukan posting ini cukup membantu: medium.com/better-programming/…

— Nasia Makrygianni

218

Gabungkan dua + pemanggilan fungsi Anda dengan fungsi / metode lain. Berikut beberapa varian dari gagasan itu:

1) Metode terpisah

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

atau dengan kelas ES6:

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

2) Sebaris

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

atau setara ES6:

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

— Rob M.
sumber

5

Atau kurang optimal:onclick={function() { f1(); f2(); }}

— Felix Kling

47

Atau di ES6onclick={()=>{ f1(); f2() }}

— Alejandro Silva

2

Atau di cjsx:onClick={ () => f1(); f2() }

— Vadorequest

2

bagaimana jika yang pertama tidak sinkron .. saya ingin yang kedua dijalankan hanya setelah yang pertama berhasil diselesaikan

— Ratnabh kumar rai

1

@Ratnabhkumarrai itu adalah masalah lain yang tidak terkait dengan React. Ini semua tentang asinkron di JS dan Promisesmungkin jawaban yang Anda cari.

— Emile Bergeron

11

Mungkin Anda bisa menggunakan fungsi panah (ES6 +) atau deklarasi fungsi lama yang sederhana.

Jenis deklarasi fungsi normal ( Bukan ES6 + ):

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

Fungsi anonim atau jenis fungsi panah ( ES6 + )

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

Yang kedua adalah jalan terpendek yang saya tahu. Semoga membantu Anda!

— Nikolas Freitas Tuan Nik
sumber

6

Memanggil beberapa fungsi di onClick untuk elemen apa pun, Anda dapat membuat fungsi pembungkus, seperti ini.

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

Fungsi-fungsi ini dapat didefinisikan sebagai metode pada kelas induk dan kemudian dipanggil dari fungsi pembungkus.

Anda mungkin memiliki elemen utama yang akan menyebabkan onChange seperti ini,

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

— Ashish Singh
sumber

0

ini sangat onclick={()=>{ f1(); f2() }}membantu saya jika saya menginginkan dua fungsi yang berbeda pada saat yang bersamaan. Tapi sekarang saya ingin membuat audiorecorder hanya dengan satu tombol. Jadi jika saya mengklik pertama saya ingin menjalankan StartFungsi f1()dan jika saya mengklik lagi maka saya ingin menjalankan StopFungsi f2().

Bagaimana kalian menyadari ini?

— Laura
sumber

Waht tentang fungsi dengan generator? Anda dapat memutuskan dengan variabel yang berubah di dalam kondisi yang memiliki fungsi setelahnya, kemudian Anda memanggil fungsi yang Anda inginkan dengan yield

— 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

Anda dapat menggunakan file bersarang.

Ada fungsi derek satu openTab()dan lainnya adalah closeMobileMenue(), Pertama kita panggil openTab()dan panggil fungsi lain di dalamnya 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
sumber