【React】ListItemに追加したButtonタップ時にListItemのクリックイベントを発火させない

今回は、ListItem に設置したボタンをタップした時の挙動の調整についてです。
Onsenu UI の List、ListItem を使ってデータのリスト表示を行った際に、リスト右端にボタンを設置したのですが、このボタンをタップした際に、ListItem タップ時に指定している処理が走ってしまうのでその対応しました。

Onsenu UI の ListItem については公式サイトをご参考にしてください。

ListItem React Component – Onsen UI Framework – Onsen UI
https://onsen.io/v2/api/react/ListItem.html

さて対処法ですが、下記の投稿を参考に、stopPropagation() を利用しました。

prevent tappable ons-list-item on button click | Monaca & Onsen UI Community Forum
https://community.onsen.io/topic/1627/prevent-tappable-ons-list-item-on-button-click/4

ListItem に設置したボタンがタップされたとき、こちらを実行すると、ListItem 自体のタップイベントは発火せず、ボタンの方のタップイベントのみを発火させることができます。

サンプルコードは下記の通りです。

<List>
  <ListItem tappable={true} onClick={this.listTap}>
    <div className="center">田中太郎さん</div>
    <div className="right">
      <Button onClick={e => that.submit(e)}>決定</Button>
    </div>
  </ListItem>
</List>

submit(e) {
  e.stopPropagation();

  // 実行したい処理を記述
}

ListItem の Button がタップされると、submit 関数が呼び出されるのですが、この関数内で e.stopPropagation(); を実行すると、ListItem タップ時に発火する listTap 関数が無事に呼び出されなくなりました！
私の場合、listTap 関数内では画面遷移の処理を行っていて、こちらが発火すると困るので、対処できてよかったです。
preventDefault() はたまに使うのですが、stopPropagation() についても併せて覚えておきたいと思います。

以上、ListItem に追加した Button をタップした時に、ListItem のクリックイベントを発火させないようにする方法でした。
ご参考になれば幸いです。