Put an Event Handler in a Component Class

Put an Event Handler in a Component Class

 

당신은 props로써 함수를 전달 할 수 있고, 자주 그렇게 할 것이다. 

event handler 함수를 전달하는 것은 특히 일반적이다. 

 

다음 레슨에서, 당신은 prop로써 event handler 함수를 전달할 것이다. 

그러나 당신은 이벤트핸들러를 전달하기 이전에 먼저 event handler를 선언해야한다. 

이번 레슨에서 이벤트 핸들러 함수를 선언할 것이다. 

 

어떻게 리엑트에서 event handler를 선언할 수 있을까?

 

당신은 단지 render method같은 컴포넌트 클래스에 method로써 이벤트핸들러를 정의한다. 

 

당신이 리엑트에서 선언한 거의 모든 함수들은 class 안에 method들로써 이같은 방법으로 선언된다. 

 

코드에디터에서 4,8째 줄을 보자.

여기에  render method로써 비슷한 문법과 함께 event handler method가 선언되었다. 

12번째 줄에서 event handler method는 이벤트에 붙는다. 

 

import React from 'react';

class Example extends React.Component {
  handleEvent() {
    alert(`I am an event handler.
      If you see this message,
      then I have been called.`);
  }

  render() {
    return (
      <h1 onClick={this.handleEvent}>
        Hello world
      </h1>
    );
  }
}

---

 

 

import React from 'react';
import ReactDOM from 'react-dom';
import { Button } from './Button';

function talk () {
	let speech = '';
  for (let i = 0; i < 10000; i++) {
    speech += 'blah ';
  }
  alert(speech);
}

class Talker extends React.Component {
  render() {
    return <Button />;
  }
}

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

위 talk 함수를 class  안에 넣어주기. (class에서 this.로 사용하기위해)

import React from 'react';
import ReactDOM from 'react-dom';
import { Button } from './Button';

class Talker extends React.Component {
  talk() {
    let speech = '';
    for (let i = 0; i < 10000; i++) {
      speech += 'blah ';
    }
    alert(speech);
	}
  
  render() {
    return <Button />;
  }
}

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

 

 

출처: 코드카데미