Reactjs中的鼠标滚轮事件

Question

你如何在reactjs中获取鼠标滚轮事件？

我试过onWheel

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

我试过onScroll

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

但这些事件都没有被提起。请参阅下面的小提琴：

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

Answer 1

首先，你的div是0高度，所以你不要滚动它。您不必绑定它，因为它是一个类（而不是es6反应组件）。只需在onWheel事件中使用event作为参数调用该函数：

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

render: function() {

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

当然，您必须使用var或in css清理代码以设置div的样式。

编辑：我把它设置在onWel而不是onScroll（女巫不存在我猜？如果你知道，请确认）。我看到了一篇关于向你的组件添加滚动事件的帖子：https://stackoverflow.com/a/29726000/4099279

Answer 2

将回调绑定到this：

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