tlog

主にシステム開発とプログラミングについて

React.jsでonClickイベントを利用する場合の注意点

はまったのでメモ。

React.jsでBootstrapのテンプレートなどを利用する場合、offcanvasを利用するためにjQueryなどでonclickイベントを下記のように登録すると思います。

<a href="#" className="sidebar-toggle" data-toggle="offcanvas" role="button">

みたいなリンクにjQueryで登録する場合、

$(toggleBtn).on('click', function (e) {
  e.preventDefault();
  //hogehoge
});

しかし、React.jsは独自のイベント管理してるらしく、下記のようにコンポーネント自体に登録してあげないと上手く動きません。

<Button bsStyle="success" bsSize="small" onClick={someCallback}>
  Something
</Button>

下記にきちんと書かれてました。 もちろん本家のReact.jsページにも…

React-Bootstrap