Javascript 当鼠标在Rect中按下时，如何连续触发回调？

我一直在尝试实现一个简单的功能，当鼠标按下一个按钮时，它会被连续触发。我用不同的组件生命周期方法尝试了不同的解决方案，不幸的是，它们都陷入了一个无休止的循环

我的方法是让

while

循环执行，除非不再按下按钮。将组件状态更新为

isPressed:false

的事件有

onMouseUp

，

onMouseLeave

。快速示例：

...
componentWillUpdate() {
  while (this.state.isPressed) this.doSomething();
}

render() {
  <div
    onMouseDown={() => this.setState({ isPressed: true })}
    onMouseUp={() => this.setState({ isPressed: false })}
    onMouseLeave={() => this.setState({ isPressed: false })}
  >
   Hey
  </div>
}

。。。
componentWillUpdate（）{
而（this.state.isPressed）this.doSomething（）；
}
render（）{
this.setState（{isPressed:true}）
onMouseUp={（）=>this.setState（{isPressed:false}）
onMouseLeave={（）=>this.setState（{isPressed:false}）
>
嘿
}

---

我理解为什么这种方法不起作用，但我很难想出如何以正确的方式实现它。

据我所知，您希望在一段时间内触发某个事件，因此简单地检查状态不是一个选项（这可能会更好，例如

this.state.isPressed？doThis（）：doThat（）

）。您可以选择的一种方法是使用Javascript的

setInterval

。下面是一个简单的例子：

类示例扩展了React.Component{
构造函数（）{
超级（）；
this.down=this.down.bind（this）；
this.up=this.up.bind（this）；
this.interval={}；
}
向下（）{
this.interval=setInterval（（）=>this.doSomething（），100）；
}
up（）{
clearInterval（这个.interval）；
}
doSomething（）{
log（'做了某事！'）；
}
render（）{
返回(
嘿
);
}
}
render（，document.getElementById（“视图”）
据我所知，您希望在某个时间间隔内触发某个事件，因此简单地检查状态不是一个选项（这可能会更好，例如
this.state.isPressed？doThis（）：doThat（）
）。您可以选择的一种方法是使用Javascript的
setInterval
。下面是一个简单的例子：


类示例扩展了React.Component{
构造函数（）{
超级（）；
this.down=this.down.bind（this）；
this.up=this.up.bind（this）；
this.interval={}；
}
向下（）{
this.interval=setInterval（（）=>this.doSomething（），100）；
}
up（）{
clearInterval（这个.interval）；
}
doSomething（）{
log（'做了某事！'）；
}
render（）{
返回(
嘿
);
}
}
render（，document.getElementById（“视图”）


类应用程序扩展React.Component{
构造函数（）{
超级（）；
此.state={
计时器：0
}
this.pressed=false；
this.doIt=this.doIt.bind（this）；
}
向下（）{
如果（！this.pressed）//防止多重循环！
this.pressed=setInterval（this.doIt，100/*每100ms执行一次*）；
}
up（）{
如果（this.pressed）{//仅当存在时停止
clearInterval（按下此键）；
this.pressed=false；
this.setState（{timer:0}）；
}
}
doIt（）{
this.setState（{timer:this.state.timer+1}）；
}
render（）{
返回
this.down（）}
onMouseUp={（）=>this.up（）}
>
{this.state.timer}
;
}
}
React.render（，document.getElementById（'app'））；

类应用程序扩展React.Component{
构造函数（）{
超级（）；
此.state={
计时器：0
}
this.pressed=false；
this.doIt=this.doIt.bind（this）；
}
向下（）{
如果（！this.pressed）//防止多重循环！
this.pressed=setInterval（this.doIt，100/*每100ms执行一次*）；
}
up（）{
如果（this.pressed）{//仅当存在时停止
clearInterval（按下此键）；
this.pressed=false；
this.setState（{timer:0}）；
}
}
doIt（）{
this.setState（{timer:this.state.timer+1}）；
}
render（）{
返回
this.down（）}
onMouseUp={（）=>this.up（）}
>
{this.state.timer}
;
}
}
React.render（，document.getElementById（'app'））；
您可以使用
setInterval
Hi，而不是对所有事件使用单一状态，尝试跟踪最后一个鼠标的事件。您可以使用
setInterval
Hi，而不是对所有事件使用单一状态，尝试跟踪最后一个鼠标的事件。
class Application extends React.Component {
  constructor() {
    super();
    this.state = {
       timer: 0
    }
    this.pressed = false;

    this.doIt = this.doIt.bind(this);
  }
  down() {
   if(!this.pressed)  //Prevent multimple loops!
     this.pressed = setInterval(this.doIt, 100 /*execute every 100ms*/);
  }
  up() {
    if(this.pressed) {  //Only stop if exists
     clearInterval(this.pressed);
     this.pressed = false;
     this.setState({timer: 0});
   }
  }
  doIt() {
    this.setState({timer: this.state.timer+1});
  }
  render() {
    return <div>
      <button
    onMouseDown={() => this.down()}
    onMouseUp={() => this.up()}
  >
   {this.state.timer}
  </button>
    </div>;
  }
}

React.render(<Application />, document.getElementById('app'));