Mouse Wheel Events in Reactjs

Question

How are you going to receive mouse wheel events in reactions?

I tried onWheel

render: function() { return <div onWheel = {this.wheel} > < /div>; }, 

and I tried onScroll

  render: function() { return <div onScroll = {this.wheel} > < /div>; }, 

But not one of these events has been picked up. See the violin below:

https://jsfiddle.net/812jnppf/2/

Answer 1

Firstly, your div is 0 height, so you are not scrolling it. You do not need to bind this as it is a class (and not a component of the es6 reaction). Just call the function with the event as a parameter in the onWheel event:

https://jsfiddle.net/812jnppf/9/

 render: function() { return <div style={{height:300, width:300}} onWheel = {(e) => this.wheel(e)} > < /div>; }, 

Of course, you need to clear the code to create your div using var or css.

EDIT: I installed it on the wheel, and not on onScroll (the witch does not exist, I think, confirm this if you know). I saw a SO post about adding a scroll event to your easilly component: fooobar.com/questions/152336 / ...

Answer 2

Bind the callback to this :

 render: function() { return <div onWheel = {this.wheel.bind(this)} > < /div>; }