Odd Behavior With JavaScript OnClick Event

Question

I have a React app which has this code:

<div className={ mainCss } data-appmode={ AppMode.MAIN } onClick={ this.handleAppModeClick.bind(this) }>
     <div className="NavLinkIconContainer"></div>
     <div>Main</div>
</div>

When I click on div with className="NavLinkIconContainer" the handleAppModeClick function does not work correctly. The function fires but does not pick up the data-* attribute. However, when I click on the div with Main as it's content it works perfectly picking up the data-* attribute. Why is this and how do I fix it?

Possible duplicate of How to access custom attributes from event object in React? — Emile Bergeron
– Emile Bergeron, Commented Nov 6, 2019 at 20:19

Ori Drori · Accepted Answer · 2019-11-06 19:31:13Z

2

You can the data-appmode value from event.currentTarget.dataset.

event - the event object
currentTarget - the element with the onClick
dataset - an easy access to data-* values

class Demo extends React.Component {
  handleAppModeClick = event => console.log(event.currentTarget.dataset.appmode);

  render() {
    return (
      <div
        data-appmode="example" 
        onClick={this.handleAppModeClick}>
           <div className="NavLinkIconContainer">NavLinkIconContainer</div>
           <div>Main</div>
      </div>
    )
  }
}

ReactDOM.render(
  <Demo />,
  root
)

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

<div id="root"></div>

answered Nov 6, 2019 at 19:31

Ori Drori

196k32 gold badges243 silver badges233 bronze badges

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

Comments

NegativeFriction · Accepted Answer · 2019-11-06 20:50:59Z

1

Ori Drori's suggestion will work. Alternatively, you can write your component as

<div className={ mainCss } data-appmode={ AppMode.MAIN } onClick={ ()=>this.handleAppModeClick(AppMode.MAIN) }>
 <div className="NavLinkIconContainer"></div>
 <div>Main</div>

This will fire off the function with a hard-coded argument. In my opinion, it's a little bit cleaner than using event.currentTarget.dataset. That being said, I am sure that others disagree with me, and if the solution works, it works.

Alternatively, you can use

 handleAppModeClick = event => console.log(event.target.getAttribute('data-appmode'));

to get the data from the actual element.

edited Nov 6, 2019 at 20:50

answered Nov 6, 2019 at 19:58

NegativeFriction

5862 silver badges20 bronze badges

Collectives™ on Stack Overflow

Odd Behavior With JavaScript OnClick Event

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related