Handle event in all nested HTML elements in ReactJS

Question

While building a table, I'm binding onClick handler to td element:

<td data-person-id={person.id} onClick={this.removePerson}>
    <button type="button" className="btn btn-default btn-default">
        <span className="glyphicon glyphicon-remove" aria-hidden="true">Remove</span>
    </button>
</td>

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

Full code https://jsfiddle.net/osqbvuub/1/

Thank you.

Rafael Quintanilha · Accepted Answer · 2016-03-29 22:17:52Z

2

<td>
    <button 
      type="button" 
      className="btn btn-default btn-default"
      onClick={this.removePerson.bind(this, person.id)}>
        <span className="glyphicon glyphicon-remove" aria-hidden="true">Remove</span>
    </button>
</td>

Let your button element handle onClick (otherwise you might have weird behavior like clicking outside of the button but inside of td triggering an event) and bind the id to the context.

Then, later on your removePerson function access id directly:

...
removePerson(id) {
  // do stuff
}
...

answered Mar 29, 2016 at 22:17

Rafael Quintanilha

1,44211 silver badges10 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Handle event in all nested HTML elements in ReactJS

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related