LoginSignup
0

More than 5 years have passed since last update.

handleEvent と onEvent と this.props.onEvent

Last updated at Posted at 2018-01-27

これは Learn ReactJS: Part I | Codecademy の 「10. handleEvent, onEvent, and this.props.onEvent」 を翻訳したものです。


ネーミングについて話しましょう。

イベントハンドラを prop として渡すとき、さっきしたように、ふたつの名前を決めねばなりません。

どちらのネーミング決定も親コンポーネント・クラスのなかで行います。つまり、コンポーネントクラスはイベントハンドラを定義してから渡します。

決めねばならないひとつめの名前は、イベントハンドラ自体の名前です。

Taker.js の6行目から12 行目までを見て下さい。これがイベントハンドラです。この名前を talk としました。

Taker.js
import React from 'react';             // 1
import ReactDOM from 'react-dom';      // 2
import { Button } from './Button';     // 3
                                       // 4
class Talker extends React.Component { // 5
  talk() {                             // 6
    let speech = '';                   // 7
    for (let i = 0; i < 10000; i++) {  // 8
      speech += 'blah ';               // 9
    }                                  // 10
    alert(speech);                     // 11
  }                                    // 12
                                       // 13
  render() {                           // 14
    return <Button talk={this.talk}/>; // 15
  }                                    // 16
}                                      // 17
                                       // 18
ReactDOM.render(                       // 19
  <Talker />,                          // 20
  document.getElementById('app')       // 21
);                                     // 22

決めねばならないふたつめの名前は、イベントハンドラを渡すための prop の名前です。これは属性名と同じです。

15行目で分かるとおり、この名前も talk としました。

return <Button talk={this.talk} />;

これらふたつの名前はどんなものでも構いませんが、しばしば用いられるネーミング規約があります。この規約にしばられる必要はありませんが、コードを読むにあたって理解しておいたほうがよいでしょう。

ネーミング規約は次のとおりです。まず、待機しているイベントのタイプを考えます。この例では、イベントのタイプは「click」です。

click イベントを待機するなら、イベントハンドラの名前は handleClick となります。keyPress イベントを待機するなら、イベントハンドラの名前は handleKeyPress となります。

class MyClass extends React.Component {
  handleHover() {
    alert('I am an event handler.');
    alert('I will be called in response to "hover" events.');
  }
}

prop の名前は on とイベント・タイプをつなげたものとなります。「click」イベントを待機しているなら、prop の名前は onClick になります。「keyPress」イベントを待機しているなら、prop の名前は onKeyPress になります。

class MyClass extends React.Component {
  handleHover() {
    alert('I am an event handler.');
    alert('I will listen for a "hover" event.');
  }

  render() {
    return <Child onHover={this.handleHover} />;
  }
}

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0