Receive an Event Handler as a prop

Receive an Event Handler as a prop

 

당신은 이제 <Talker / >에서 <Button />으로 함수를 전달했다. 

 

코드에디터에서, Button.js를 선택해라. 

Button이 <button></button>엘레먼트를 렌더하는 것에 주목해라. 

 

만약 유저가 <button></button 엘레먼트를 클릭하면, 

당신은 당신의 전달된 talk 함수가 호출되기를 원할것이다. 

 

이것은 이벤트핸들러로써 <button></button>코드에디터에서, Button.js를 선택해라. 

 

Button이 <button></button>엘레먼트를 렌더하는 것에 주목해라. 

 

 

 

만약 유저가 <button></button 엘레먼트를 클릭하면, 

 

당신은 당신의 전달된 talk 함수가 호출되기를 원할것이다. 

 

 

 

이것은 이벤트핸들러로써 <button></button>에 talk를 붙여야 한다는 것을 의미한다. 

 

어떻게 하는 거야? JSX 요소에 이벤트 핸들러를 부착하는 것과 동일한 방법으로,

JSX 요소에 특별한 attribute을 부여한다. 

 

attribute의 이름은 onClick or onHover같은 무언가 여야만하고,

attribute의 값은 당신이 붙이기 원하는 event handler여야 한다. 

 

 

// Button.js

import React from 'react';

export class Button extends React.Component {
  render() {
    return (
      <button onClick={this.props.talk}>
        Click me!
      </button>
    );
  }
}

//Talker.js

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 talk={this.talk} />;
  }
}

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

 

 

https://www.codecademy.com/courses/react-101/lessons/this-props/exercises/receive-event-handler-prop