props としての関数と React の SyntheticEvent.md

React: 保守しやすいハイパフォーマンスの UI コンポーネントを作成する https://www.ibm.com/developerworks/jp/web/library/wa-react-intro/index.html

props としての関数と React の SyntheticEvent

要素の属性は、単純なデータ型ではなくコールバック関数でパラメーター化されることがよくあります。例として、皆さんは HTML の <button> 要素の onClick 属性を設定した経験があることでしょう。それと同じ手法を、React コンポーネントにも適用することができます。2 番目のサンプル・コード (example2.jsx) では、カスタム <MyButton> React コンポーネントがそのプロパティーの 1 つとして、onClick ハンドラー・コールバックを取ります.

var MyButton = React.createClass({
  _buttonClicked:  function(e) {
    if (this.props.onClick) {
        this.props.onClick(e)
    }
  },
  render: function() {
    return 
     <button onClick={this._buttonClicked}>
             {this.props.textlabel}</button>;
  }
});

ボタンをクリックすると、HTML の <button> 要素の onClick イベントが起動されます。すると、React はこのイベントを <MyButton> の _buttonClicked() 実装に転送します.
知っておくべき重要な点として、_buttonClicked() は、ネイティブ・ブラウザーの DOM イベントで呼び出されるのではなく、React 固有の SyntheticEvent という特定のブラウザーに依存しない W3C 準拠のオブジェクトによって呼び出されます。SyntheticEvent は、各種のブラウザーで同じように動作し、実際の DOM から生成されたままのイベントをラップします (ラップされた DOM イベントには nativeEvent プロパティーでアクセスすることができます。SyntheticEvent の詳細に関するリンクは、「参考文献」を参照してください).
_buttonClicked() 内のコードでは、<MyButton> 自身の onClick プロパティーが設定されていることを確認してから、SyntheticEvent をそのイベント・ハンドラーに転送します.