reactjs에서 버튼 클릭에 대해 두 개의 함수를 바인딩하는 방법

Question

ReactJS에서 어떻게 아래 시나리오를 수행 할 수 있습니까?

function foo1(){ 
    console.log('foo1') 
} 

function foo2(){ 
    console.log('foo2') 
} 
$('#button').click(foo1); 
$('#button').click(foo2); 

나는 기능을 모두

가 jsx 코드 아래 고려 버튼을 클릭에서 호출 할

Var Component = React.createClass({ 
    foo1: function(){ 
     console.log('foo1'); 
    }, 
    foo2: function(){ 
     console.log('foo2'); 
    }, 
    render: function(){ 
     return (
      <button onClick={this.foo}> click me </button> 
     ); 
    } 

}); 

Answer 1

어쩌면 당신은 처음 두 순차적으로 호출하는 세 번째 함수를 작성할 수 있습니다

var Component = React.createClass({ 
    foo1: function(){ 
     console.log('foo1'); 
    }, 
    foo2: function(){ 
     console.log('foo2'); 
    }, 
    foo: function(){ 
     foo1(); 
     foo2(); 
    }, 
    render: function(){ 
     return (
      <button onClick={this.foo}> click me </button> 
     ); 
    } 

}); 

또는 인라인으로 설정 :

<button onClick={function(){ this.foo1(); this.foo2(); }.bind(this)}> click me </button> 

Answer 2

함수 배열을 만들어서 반복 할 수 있습니다.

Var Component = React.createClass({ 
foo1: function(){ 
    console.log('foo1'); 
}, 
foo2: function(){ 
    console.log('foo2'); 
}, 
render: function(){ 
    return (
     <button onClick={(e)=> [foo1, foo2].forEach(x=> x.call(null,e))}> click me </button> 
    ); 
} 

});