やりたいことをコードで書いてみたけど、これ何の為に必要なのかよくわからんなｗ

render (
  <a onClick={e=>{
    console.log('parent!!');
  }}>
    外側
    <span onClick={e=>{
      console.log('child!!');
    }}>
      内側
    </span>
  </a>
);

もう少し実用的に書くなら

<ul>
  <li onClick={}>
    <span onClick={}>(1)</span>
    ひとつめ
  </li>
  <li onClick={}>
    <span onClick={}>(2)</span>
    ふたつめ
  </li>
  <li onClick={}>
    <span onClick={}>(3)</span>
    みっつめ
  </li>
</ul>

こんな感じで、li全体がクリックできて、中の(1)をクリックした時は別の挙動みたいなやつを作りたい時に、何が問題かというと、(1)をクリックした時にliのクリックも発生する。
jQueryで言うところの.clickでreturn false;する処理をやりたい。

解決方法

<li onClick={}>
  <span onClick={e=>{
　　// ここで処理
    e.stopPropagation();
  }}>
  </span>
</li>

この e.stopPropagation(); で、親のonClickイベントを止めれる。