Question

我正在尝试根据鼠标移动（即，{visibility: visible}鼠标移动时{visibility: hidden}停止移动）来动态切换按钮元素的可见性。该按钮与onMouseMove一起显示，但是我在第二部分的开始位置上很挣扎。由于React没有onMouseStop事件，实现此目标的最佳方法是什么？

export default class Infographic extends Component {
  constructor(props){
    super(props);

    this.state = {
      mouseMoving: false,
    };

    this.setMouseMove = this.setMouseMove.bind(this);
  }

  setMouseMove(e) {
    e.preventDefault();
    this.setState({mouseMoving: true});
  }

  render() {

    const scrollButtonStyle = {
      visibility: this.state.mouseMoving ? 'visible': 'hidden', 
     };

     return (
       <div onMouseMove={e => this.setMouseMove(e)}>
         <button style={scrollButtonStyle}>Back to top</button>
         <h1>Lorem Ipsum</h1>
       </div>  
     );
  }
}

更新

根据下面的建议，我在setMouseMove方法中添加了以下IIFE块（使用箭头函数进行范围访问），它的工作原理与预期的一样。感谢您的帮助！

setMouseMove(e) {
  e.preventDefault();
  this.setState({mouseMoving: true});

  let timeout;
  (() => {
    clearTimeout(timeout);
    timeout = setTimeout(() => this.setState({mouseMoving:false}), 50);
  })();
}

Answer 1

具有超时功能，可以将不活动的毫秒数设置为“不移动”。

let timeout;
let whenMouseMoves = () => {
  clearTimeout(timeout);
  timeout = setTimeout(toggleButton(), 50);
}

然后按您认为适合的按钮调整功能。显然，如果使用此代码，则需要创建toggleButton()函数。

如何检测鼠标何时停止在React中移动？

1 个答案: