reactjs - Reactjs 中的鼠标滚轮事件

Question

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

我已经尝试过 onWheel

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

我已经尝试过 onScroll

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

但是这些事件都没有被捕获。请参阅下面的 fiddle :

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

Answer 1

首先，您的 div 高度为 0，因此您无法在其上滚动。您不必绑定(bind)它，因为它是一个类(而不是 es6 React 组件)。只需使用事件作为 onWheel 事件的参数来调用函数即可:

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

render: function() {

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

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

编辑:我将其设置为 onWheel 而不是 onScroll (我猜女巫不存在？如果你知道的话请确认)。我看到一篇关于轻松向组件添加滚动事件的帖子:https://stackoverflow.com/a/29726000/4099279