Handle event in all nested HTML elements in ReactJS
<p>While building a table, I'm binding <strong>onClick</strong> handler to <strong>td</strong> element:</p>

<p><div class="snippet" data-lang="js" data-hide="false">
<div class="snippet-code">
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;td data-person-id={person.id} onClick={this.removePerson}&gt;
    &lt;button type="button" className="btn btn-default btn-default"&gt;
        &lt;span className="glyphicon glyphicon-remove" aria-hidden="true"&gt;Remove&lt;/span&gt;
    &lt;/button&gt;
&lt;/td&gt;</code></pre>
</div>
</div>
</p>

<p>But when an event is handled, it points to <strong>button</strong> or <strong>span</strong> elements but not <strong>td</strong> one so it means I can't just get needed <strong>data-person-id</strong> attribute. How can I fix it?</p>

<p>Full code <a href="https://jsfiddle.net/osqbvuub/1/" rel="nofollow">https://jsfiddle.net/osqbvuub/1/</a></p>

<p>Thank you.</p>