Rhapsodist

react

React 에서 Event 에 여러가지 함수 트리거 설정하기

2020.03.03

Created By Rhapsodist

Rhapsodist

React 에서 Event 에 여러가지 함수 트리거 설정하기

1. 개요

최근에 react에서 click event에 2가지 이상 의 함수를 실행시킬 일이 있었다. 그런데 어떻게 해야하는지 생각이 들지 않아 찾아 보았더니 너무도 당연하고, 너무도 간단하게 여러가지 함수를 한개의 event에 발생시킬 수 있었다.

내가 생각해도 이걸 생각 해내지 못했다는 내 자신이 안믿길 정도다...

2. Code

2.1. method 로 분리한 경우

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

    _handleOnclick = (event) => {
        this.testFunc1()
        this.testFunc2()
    }

    testFunc1 = () => {
        console.log('func1')
    }

    testFunc2 = () => {
        console.log('func2')
    }
}


// =>
// func1
// func2

2.2.inline 으로 작성한 경우

<a href="#" onClick={(event) => { testFunc1(); testFunc2()}}>Test</a>

Share to ...

#react
#trigger
#event
#click
#multiple