react-click event has empty event.target

Question

How do I get the target of the onClick event div.id inside the function showChildren?

Desired result:

div.id

Actual result:

<react></react>

Relevant Razor

  iterateNavigationObject: function(item) {

    var titleStyle = {
      'backgroundColor': 'grey'
    };

    return (
      <div>
        <ul>
          <li style={titleStyle}>
            <div id="asdf" onClick={this.showChildren}>{item.text}</div>//I want the id of this element
              <ul>
                {item.items.map(this.iterateNavigationSubitems, this)}
              </ul>
          </li>
        </ul>
      </div>
    );
  },

  showChildren: function(){
    console.log(event.type);//OUTPUT:  'react-click'
    console.log(event.target);//OUTPUT:  <react></react>
  },

Andreyco · Accepted Answer · 2016-03-07 22:23:08Z

Change your click handler signature

showChildren: function(event) {
  console.log(event.type);//OUTPUT:  'react-click'
  console.log(event.target);//OUTPUT:  <react></react>
},

Explanation:
you might expect this to work from vanilla JS. Internet Explorer provides a global object window.event, which references the last event. And before IE9 there are no arguments in the handler. This applies to IE only (maybe other browsers as well). React uses it's own synthetic events, thus don't expect this to work. React passes event as first argument to all event listeners.

Regardless, you should not rely on this in React, nor vanilla JS. Always accept event as function argument.

Edit
To pass ID, use higher order function, which returns actual event listener. Update call to this

<div onClick={this.showChildren("asdf")}>{item.text}</div>

Then, update listener to accept ID. You can disregard previous answer in this solution.

showChildren(id) {
  return () => {
    console.log(id);
  }
}

Collectives™ on Stack Overflow

react-click event has empty event.target

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