Gọi nhiều chức năng trên Nhấp vào ReactJS

Tôi biết trong js vani, chúng ta có thể làm

onclick="f1();f2()"

Điều gì sẽ tương đương với việc thực hiện hai lệnh gọi hàm onClick trong ReactJS?

Tôi biết việc gọi một hàm là như thế này:

onClick={f1}

Kết hợp hai lệnh gọi + hàm của bạn trong một hàm / phương thức khác. Dưới đây là một số biến thể của ý tưởng đó:

1) Phương pháp riêng biệt

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

hoặc với các lớp ES6:

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

2) Nội tuyến

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

hoặc ES6 tương đương:

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

Có thể bạn có thể sử dụng hàm mũi tên (ES6 +) hoặc khai báo hàm cũ đơn giản.

Kiểu khai báo hàm bình thường ( Không phải ES6 + ):

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

Hàm ẩn danh hoặc loại hàm mũi tên ( ES6 + )

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

Con đường thứ hai là con đường ngắn nhất mà tôi biết. Hy vọng nó sẽ giúp bạn!

Gọi nhiều hàm trên onClick cho bất kỳ phần tử nào, bạn có thể tạo một hàm wrapper, giống như thế này.

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

Các hàm này có thể được định nghĩa như một phương thức trên lớp cha và sau đó được gọi từ hàm wrapper.

Bạn có thể có phần tử chính sẽ gây ra onChange như thế này,

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

điều này onclick={()=>{ f1(); f2() }}đã giúp tôi rất nhiều nếu tôi muốn hai chức năng khác nhau cùng một lúc. Nhưng bây giờ tôi muốn tạo một máy ghi âm chỉ có một nút. Vì vậy, nếu tôi nhấp trước, tôi muốn chạy StartFunction f1()và nếu tôi nhấp lại thì tôi muốn chạy StopFunction f2().

Làm thế nào để các bạn nhận ra điều này?

Bạn có thể sử dụng lồng nhau.

Có một chức năng kéo một là openTab()và một chức năng khác closeMobileMenue(), Đầu tiên chúng ta gọi openTab()và gọi một chức năng khác bên trong 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}