title: Handle event in all nested HTML elements in ReactJS
body: <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>