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/

- Oliver Watkins

---

理论上，onWheel合成事件是您想要使用的内容。我有一个基本的create-react-app应用程序，并且对于我来说，onWheel运行良好。我只是无法使您的jsfiddle适用于滚轮事件，但单击事件没有问题：https://jsfiddle.net/812jnppf/8/ - Finbarr O'B

Answer 1

首先，您的div高度为0，因此您不能在其上滚动。您不必将此绑定为类（而不是es6 react组件）。只需使用事件作为参数调用函数onWheel事件：

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

render: function() {

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

当然，您必须清理代码，才能使用变量或CSS样式来设计您的div。

编辑：我将其设置为onWheel而不是onScroll（我猜不存在onScroll？如果您知道，请确认）。我看到了一个SO帖子，介绍了如何轻松将滚动事件添加到您的组件：https://dev59.com/y10a5IYBdhLWcg3w-8_a#29726000

- Nevosis

---

哦，当然，我真蠢。它在错误的容器上。我的下一个问题是如何解释y=100 y=-100事件，以及如何实现缩放效果。 - Oliver Watkins

据我所知，(e) => this.wheel(e) 和 this.wheel 是一样的，除了每次都会创建一个新对象，从而强制重新渲染。+++ onScroll 存在并且有效，我正在使用它。 - maaartinus

Answer 2

将回调函数绑定到this：

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

- niellus