javascript - 节气门在React

令我惊讶的是，以下这段代码旨在限制我的React Component类中的mousemove不能按预期工作，该状态始终报告为true，并且mousemove继续不断被触发。我不明白为什么会这样。

class SVGParent extends React.Component {
   constructor(){
      super( props );
        ...
        this.dispatchMouseMoveThrottle = this.dispatchMouseMoveThrottle.bind( this );
    }
    ...
    dispatchMouseMoveThrottle( a ){
        let state = true;
        let dispatchMouseMove = this.props.dispatchMouseMove;
        return( function( e ){
            e.persist(); // this excludes from React's synthetic event system
            setTimeout( function(){
                state = true;
            }, 5000);
            if( state === true ){
                state = false;
                return( dispatchMouseMove( abc ));
            }
        });
    }
    render(){
        ...
        return(
            <svg
                ...
                mousemove = {this.dispatchMouseMoveThrottle( a )}
            </svg>
        );
}

最佳答案

我想问题是，当mousemove事件触发时，它不会调用dispatchMouseMoveThrottle(a)返回的函数。而是每次触发时都调用dispatchMouseMoveThrottle(a)。因此，这就是state变量始终为true的原因。

我认为您最好在组件中将state变量保留为全局变量。或者可能只是尝试使用lodash debounce或throttle方法，这可能会有所帮助。

关于javascript - 节气门在React，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/43687551/