Reactjs鼠标滚轮监听

1 添加相应的react所需的包及插件

npm install react -s
npm install react-dom -s

2 鼠标滚轮事件及引用子组件的滚轮处理事件

 handleWheel: function (event) {

            //判断鼠标滚轮的上下滑动
            let deta = event.deltaY;
            if(deta > 0){
            this.setState({
                indexs:1
            });
                console.log(this.state.indexs+"bottom");
            }
            if(deta < 0){
                this.setState({
                    indexs:-1
                });
                console.log(this.state.indexs+"top");
            }

            this.refs.getPosition.mouseWheel(this.state.indexs);

        },

        render : function() {
            return <div onWheel={this.handleWheel} className="main">
                    <Nav ref="getPosition"  indexs={this.state.indexs}></Nav>
                </div>
        }

3 鼠标滚轮处理事件

//对鼠标滚轮传入的数据进行判断及处理
 mouseWheel:function (indexs) {
              let inx = this.state.Move_index;
              indexs = indexs + inx;
            console.log(indexs+"indexs");
            if (indexs >= 0 && indexs <= 3){
                this.setState({
                    Move_index:indexs
                });
            }else if (indexs < 0){
                this.setState({
                    Move_index:0
                })
            }else if (indexs > 3){
                this.setState({
                    Move_index:3
                })
            }
              this.position(indexs);
        },

        //依据鼠标滚轮传入的数据改变所需的状态
        position(numder){
            console.log(numder+"list");
            switch (numder){
                case 0:return this.setState({
                    Move_index:0
                });
                case 1:return this.setState({
                    Move_index:1
                });
                case 2:return this.setState({
                    Move_index:2
                });
                case 3:return this.setState({
                    Move_index:3
                });
            }

        },