Use an Event Listener in a Component

 

 

Use an Event Listener in a Component

 

렌더함수는 종종 이벤트리스너를 포함한다. 

여기 렌더함수의 이벤트리스너의 예시이다. 

 

render() {
  return (
    <div onHover={myFunc}>
    </div>
  );
}

event handler는 이벤트에 대한 응답으로 호출되는 함수임을 기억해라.

위의 예시에서 event handler는 myFunc()이다. 

 

리엑트에서, 당신은 event handler를 컴포넌트 클래스에 method로써 정의할 수있다. 

이렇게 말이다: 

 

class MyClass extends React.Component {
  myFunc() {
    alert('Stop it.  Stop hovering.');
  }

  render() {
    return (
      <div onHover={this.myFunc}>
      </div>
    );
  }
}

 

컴포넌트 클래스가 두개의 메소드를 가지는 것을 주목해라: .myFunc()과 .render()이다. 

 

.myFunc()은 이벤트핸들러로써 사용된다.

.myFunc()은 유저가 렌더된 div에 호버할 때마다 언제든지 호출될 것이다. 

 

import React from 'react';
import ReactDOM from 'react-dom';

class Button extends React.Component {
  scream() {
    alert('AAAAAAAAHHH!!!!!');
  }

  render() {
    return <button onClick={this.scream}>AAAAAH!</button>;
  }
}

ReactDOM.render(<Button />, document.getElementById('app'))

 

 

https://www.codecademy.com/courses/react-101/lessons/react-components-advanced-jsx/exercises/component-event-listener