เรียกใช้หลายฟังก์ชันบนคลิก ReactJS

ฉันรู้ว่าใน vanilla js เราทำได้

onclick="f1();f2()"

อะไรจะเทียบเท่ากับการเรียกใช้ฟังก์ชันสองฟังก์ชัน onClick ใน ReactJS

ฉันรู้ว่าการเรียกฟังก์ชันหนึ่งเป็นแบบนี้:

onClick={f1}

รวมการเรียกฟังก์ชัน two + ของคุณไว้ในฟังก์ชัน / วิธีการอื่น แนวคิดดังกล่าวมีสองรูปแบบดังนี้

1) วิธีการแยก

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

หรือกับคลาส ES6:

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

2) อินไลน์

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

หรือเทียบเท่า ES6:

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

บางทีคุณอาจใช้ฟังก์ชันลูกศร (ES6 +) หรือการประกาศฟังก์ชันเก่า ๆ

ประเภทการประกาศฟังก์ชันปกติ ( ไม่ใช่ ES6 + ):

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

ฟังก์ชันไม่ระบุชื่อหรือประเภทฟังก์ชันลูกศร ( ES6 + )

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

เส้นทางที่สองเป็นถนนที่สั้นที่สุดที่ฉันรู้จัก หวังว่ามันจะช่วยคุณได้!

การเรียกใช้หลายฟังก์ชันใน onClick สำหรับองค์ประกอบใด ๆ คุณสามารถสร้างฟังก์ชัน Wrapper ได้เช่นนี้

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

ฟังก์ชันเหล่านี้สามารถกำหนดเป็นวิธีการบนคลาสแม่และเรียกใช้จากฟังก์ชัน Wrapper

คุณอาจมีองค์ประกอบหลักที่จะทำให้เกิด onChange เช่นนี้

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

สิ่งนี้onclick={()=>{ f1(); f2() }}ช่วยฉันได้มากถ้าฉันต้องการฟังก์ชันที่แตกต่างกันสองอย่างในเวลาเดียวกัน แต่ตอนนี้ฉันต้องการสร้าง Audiorecorder ด้วยปุ่มเดียว ดังนั้นถ้าฉันคลิกแรกที่ฉันต้องการที่จะทำงาน StartFunction f1()และถ้าฉันคลิกอีกครั้งแล้วฉันต้องการที่จะทำงาน f2()StopFunction

พวกคุณตระหนักถึงสิ่งนี้ได้อย่างไร?

คุณสามารถใช้แบบซ้อน

มีฟังก์ชั่นการดึงหนึ่งopenTab()และอีกอย่างก็คือcloseMobileMenue()เดิมทีเราเรียกและเรียกภายในฟังก์ชั่นอื่นopenTab()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}