[Typescript React] 이벤트 핸들링

---

JSX 태그에 이벤트 핸들러 달기

JSX 태그에 이벤트 핸들러를 달고싶다면, 아래의 3가지만 기억하세요.

나머지는 HTML 태그처럼 사용하시면 됩니다!

• 문자열 대신 함수를 전달합니다.
• 이벤트 핸들러 함수의 이름은 lowerCalmelCase으로 짓습니다.
• 이벤트 핸들러 함수의 첫 번째 인자는 this로 바운딩해야 합니다.

html + js :

function toggleLasers(){
   ...
}

<button onClick="toggleLasers()"  isToggleOn=false />

JSX :

interface ToggleState {
    isToggleOn: boolean;
}

class Laser extends React.Component<ToggleState, ToggleState> {
    constructor(props: ToggleState) {
        super(props);
        this.state = {
            isToggleOn: props.isToggleOn
        };

        // (1) 반드시 바인딩하세요.
        this.toggleLaser = this.toggleLaser.bind(this);
    }

    // (2) 핸들러의 이름은 lowerCammelCase 스타일로 작성하세요.
    toggleLaser() {
        this.setState(prevState => {
            return {
                isToggleOn: !prevState.isToggleOn
            };
        });
    }

    render(): ReactNode {
        // (3) {} 안에 함수를 넣어 전달하세요.
        return <button onClick={this.toggleLaser} />;

        // 인라인 바인딩도 가능합니다. 
        // return <button onClick{this.toggleLaser.bind(this)} />;
    }
}

자바스크립트의 동작방식에 따라 this는 문맥에 따라 바뀔 수 있습니다.

반드시 this가 객체 자신을 가르키도록 함수를 바인딩해야 합니다.

인라인 바운딩을 사용하면, 추가인자도 전달할 수 있습니다.

<button onClick={this.toggleLaser.bind(this, param)} />;