Rect에서 마우스를 누르고있는 동안 계속 콜백을 트리거하는 방법은 무엇입니까?

Question

저는 마우스가 버튼에있을 때 지속적으로 트리거되는 간단한 기능을 구현하려고했습니다. 불행히도 모든 요소가 무한 루프에 빠지면서 구성 요소의 라이프 사이클 메소드마다 다른 솔루션을 시도했습니다.

내 접근 방식은 단추를 더 이상 누르지 않는 한 실행되는 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> 
} 

나는이 방법이 효과가없는 이유를 이해하지만 올바른 방법을 구현하는 방법을 파악하는 데 어려움이 있습니다.

Answer 1

https://codepen.io/anon/pen/peoLeN

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')); 

모든 이벤트를 추적하는 시도를 위해 당신이이`대신 하나의 상태를 사용하는

Answer 2

간격으로 무엇인가를 실행하고 싶다는 판단을 내리면 단순히 상태를 확인하는 것이 옵션이 아닙니다 (가능하면 더 좋을 수 있음, 예 : this.state.isPressed ? doThis() : doThat()). 선택할 수있는 한 가지 방법은 자바 스크립트의 setInterval을 사용하는 것입니다. 다음은 간단한 예제 :

class Example extends React.Component { 
 
    constructor() { 
 
    super(); 
 
    this.down = this.down.bind(this); 
 
    this.up = this.up.bind(this); 
 
    this.interval = {}; 
 
    } 
 
    down() { 
 
    this.interval = setInterval(() => this.doSomething(), 100); 
 
    } 
 
    up() { 
 
    clearInterval(this.interval); 
 
    } 
 
    doSomething() { 
 
    console.log('Did something!'); 
 
    } 
 
    render() { 
 
    return (
 
     <div onMouseDown={this.down} onMouseUp={this.up} onMouseLeave={this.up}> 
 
     Hey 
 
     </div> 
 
    ); 
 
    } 
 
} 
 

 
ReactDOM.render(<Example />, document.getElementById("View"));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script> 
 
<div id='View'></div>