부모 컴포넌트인 Content에서 counter의 초깃값을 0으로 설정한다. 이벤트 핸들러도 부모 컴포넌트에 정의되어 있다. 따라서 자식 컴포넌트인 ClickCounterButton의 이벤트는 부모 컴포넌트에서 실행된다. 다음 예제 코드에서 constructor()와 handleClick() 메서드를 추가한 Content 컴포넌트를 확인할 수 있다(ch06/onclickprops/jsx/content.jsx).

 

예제 코드 6.8 이벤트 핸들러를 속성으로 전달한다.

class Content extends React.Component {
    constructor(props) {
        super(props)
        this.handleClick = this.handleClick.bind(this) ---- constructor에서 Content 클래스의 인스턴스로 컨텍스트를 연결하여 this.setState( )를 쓸 수 있게 한다. 
        this.state = {counter: 0}
    }
    handleClick(event) {
        this.setState({counter: ++this.state.counter})
    }
    render() {
        return (
            <div>
                <ClickCounterButton
                    counter={this.state.counter}
                    handler={this.handleClick}/>
            </div>
        )
    }
}

---