React

handleEvent と onEvent と this.props.onEvent

これは 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} />;
  }
}