React Events!

## React Events

- State most commonly changes in direct response to some event.

- Every JSX element has built-in attributes representing every kind of browser event.

- They are camel-cased(ex: onClick).

- They take callback function as event listeners.

import React, { Component } from 'react'

class Button extends Component {
    render() {
        return ( //most of time we don't do one-line function 
            <button onClick={function () { 
            alert('Hey You Clicked Me!'); 
            }}  >
            Click ME!!'
            </button >
        )
    }
}

export default Button;

 

 

 

## [THIS] is back

- but this is undefined!

- Who is calling *handleClick* for us?

    React is, on click

- What is it calling it on?

    It does not remember to call it on our instance

    The method was called "out of context"

- What do we do?

    *.bind* it!

import React, { Component } from 'react'

class BrokenClick extends Component {
    constructor(props) {
        super(props);
        this.state = { clicked: false };
        this.handleClick = this.handleClick.bind(this);//bind를 통해 this와 엮어줌
    }
    handleClick(e) {
        this.setState({ clicked: true });
    }
    render() {
        return (
            <div>
                <h1>{this.state.clicked ? 'Clicked!!' : 'Not Clicked..'}</h1>
                <button onClick={this.handleClick}>Click Me!!</button>
            </div>
        );
    }
}

export default BrokenClick;