출처: https://www.codecademy.com
컴포넌트 클래스 내에서 event handler 사용하기
event handler 함수 정의 : 컴포넌트 클래스에 메서드 형식으로 정의한다.
//example.js
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>
);
}
}
다른 컴포넌트의 event handler 사용하기
예) Talker 컴포넌트에 정의된 talk라는 이벤트 핸들러를 Botton 컴포넌트에서 사용하기
// Talker.js
import React from 'react';
import ReactDOM from 'react-dom';
import { Button } from './Button';
class Talker extends React.Component {
// "blah" 가 알림창에 9999번 찍히는 event handler
talk() {
let speech = '';
for (let i = 0; i < 10000; i++) {
speech += 'blah ';
}
alert(speech);
}
render() {
return <Button talk={this.talk} />; // 여기서 Button 컴포넌트 클래스를 불러서 사용.
// 앞 talk은 속성name, 뒤 this.talk는 이벤트 핸들러
}
}
ReactDOM.render(
<Talker />,
document.getElementById('app')
);
.
// Button.js
import React from 'react';
export class Button extends React.Component {
render() {
return (
<button talk={this.props.talk}> //this.props.talk 를 통해서 talk function에 접근할 수 있게된다.
Click me!
</button>
);
}
}
실행화면
event handler naming
event handler를 prop으로 넘겨주기 위해서는 두번의 네이밍이 필요하다.
첫번째는 event handler 그 자체의 name, 두번째는 컴포넌트의 속성 name.
마음대로 naming 해도 실행은 되지만 나름의 규칙이 있으니 따르도록 하자.
-
think about what type of event you are listening for.
click 이벤트:
handleClick
keyPress 이벤트
handleKeyPress
-
Your prop name should be the word
on
.handleClick
-onClick
handleKeyPress
-onKeyPress
아래는 위 규칙을 적용한 코드이다.
// Talker.js
import React from 'react';
import ReactDOM from 'react-dom';
import { Button } from './Button';
class Talker extends React.Component {
handleClick() {
let speech = '';
for (let i = 0; i < 10000; i++) {
speech += 'blah ';
}
alert(speech);
}
render() {
return <Button onClick={this.handleClick} />;
}
}
ReactDOM.render(
<Talker />,
document.getElementById('app')
);
.
// Button.js
import React from 'react';
export class Button extends React.Component {
render() {
return ( //
<button onClick={this.props.handleClick}>
Click me!
</button>
);
}
}