2014-09-26 17 views
39

Tôi biết trong js vani, chúng ta có thể làmGọi nhiều chức năng onClick ReactJS

onclick="f1();f2()" 

Điều gì sẽ là tương đương để làm hai chức năng gọi onClick trong ReactJS?

Tôi biết gọi một chức năng là như thế này:

onClick={f1} 
+0

Rất đơn giản: chuyển một hàm gọi hai hàm, giống như bạn muốn với 'ele.onclick = ...' hoặc 'addEventListener'. –

Trả lời

74

Quấn hai của bạn + chức năng cuộc gọi trong một chức năng/phương pháp. Dưới đây là một vài biến thể của ý tưởng rằng:

1) phương pháp riêng

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) Inline

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

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

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

Hoặc ít tối ưu hơn: 'onclick = {function() {f1(); f2(); }} ' –

+8

Hoặc trong ES6' onclick = {() => {f1(); f2()}} ' –

+2

Hoặc trong cjsx:' onClick = {() => f1(); f2()} ' – Vadorequest

Các vấn đề liên quan