Javascript 如何正确检测ReactJS中的鼠标滚轮

也许有人知道怎么修理我的包

我有一个问题，检测车轮向上和向下，这也是一个问题与MAC OS触摸板

如果向下旋转，我需要将状态增加1（参见代码），如果向上旋转，则需要将状态减少1。 但如果我向上滚动，就会有这么多的探测，向下滚动也是一样。我不需要卷轴

我的代码看起来：

const pages = [
  { name: "About", page: <About />, id: 1 },
  { name: "Contact", page: <Contact />, id: 2 },
  { name: "Hire Us", page: <HireUs />, id: 3 },
  { name: "Home", page: <Home />, id: 4 },
  { name: "Works", page: <Works />, id: 5 }
];

class App extends Component {
  constructor() {
    super();
    this.state = {
      item: 1
    };
  }
  scrollSite(y) {
    const pageLenght = pages.length - 1;
    if (y < 0) {
      console.log("slide up");
      if (this.state.item < pageLenght) {
        this.setState({ item: this.state.item + 1 });
      } else if (this.state.item === pageLenght) {
        this.setState({ item: 0 });
      }
    } else {
      console.log("slide down");
      if (this.state.item === 0) {
        this.setState({ item: this.state.item - 1 });
      } else if (this.state.item === pageLenght) {
        this.setState({ item: 0 });
      }
    }
  }
  componentDidMount() {
    window.addEventListener("wheel", e => {
      this.scrollSite(e.wheelDelta);
    });
  }
  render() {
    const { item } = this.state;
    return (
      <div className="container">
        <div className="navigation">
          {pages.map(page => (
            <div key={page.id}>{page.name}</div>
          ))}
        </div>
        <div>{pages[item].page}</div>
      </div>
    );
  }
}

export default App;

const页面=[
{姓名：“关于”，页码：，id:1}，
{姓名：“联系人”，页码：，id:2}，
{姓名：“雇用我们”，页码：，id:3}，
{姓名：“主页”，页码：，id:4}，
{姓名：“作品”，页码：，id:5}
];
类应用程序扩展组件{
构造函数（）{
超级（）；
此.state={
项目：1
};
}
滚动站点（y）{
const pageLenght=pages.length-1；
if（y<0）{
控制台日志（“向上滑动”）；
if（this.state.item{
这个.滚动站点（如wheelDelta）；
});
}
render（）{
const{item}=this.state；
返回(
{pages.map（页面=>(
{page.name}
))}
{页面[项目]。页面}
);
}
}
导出默认应用程序；

您可以使用javascript添加事件侦听器，如下所示

window.addEventListener("wheel", event => {
 // Your code
});

或者可以直接在元素上添加onWheel

<div onWheel = {(e) => this.onWheel(e)} > 

this.onWheel（e）}>

如果您检查了我的代码，您可以看到我的代码可能重复！