これは Learn ReactJS: Part I | Codecademy の 「10. handleEvent, onEvent, and this.props.onEvent」 を翻訳したものです。
ネーミングについて話しましょう。
イベントハンドラを prop として渡すとき、さっきしたように、ふたつの名前を決めねばなりません。
どちらのネーミング決定も親コンポーネント・クラスのなかで行います。つまり、コンポーネントクラスはイベントハンドラを定義してから渡します。
決めねばならないひとつめの名前は、イベントハンドラ自体の名前です。
Taker.js
の6行目から12 行目までを見て下さい。これがイベントハンドラです。この名前を talk
としました。
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} />;
}
}