React.js 내가 MouseMove 이벤트 이벤트를 스로틀 할 필요가 event.persist() 오류

Question

을 던지는 유지에서 mousemove 이벤트를 스로틀, 나는 방법을 구축하기 위해 아래의 도움말을 따라,하지만 작동하지 않습니다 다음은 Perform debounce in React.js

내 코드 (http://jsbin.com/binesofepo/edit?js,console,output는) :

경고 : 당신이 tool__body에 MouseMove 이벤트를 유지하는 경우

class Tool extends Component { 
    constructor(props) { 
    super(props); 
    this._onMouseMove = _.throttle(this._onMouseMove.bind(this), 1000) 
    } 

    render() {  
    return (

     <div ref="tool" className="tool"> 
     <div ref="toolBody" 
      className="tool__body" 
      onMouseMove={this._onMouseMove}></div> 
     </div> 
    ) 
    } 
    _onMouseMove(e) { 
    e.persist() 
    console.log(e.screenX) 
    } 
} 

, 그것은 아래의 경고를 많이 얻을 것이다이 S 즐거운 이벤트는 성능상의 이유로 재사용됩니다. 이것을보고있는 경우 공개/무효 합성 이벤트에서 screenX 속성에 액세스하고 있습니다. null로 설정됩니다. 원래 합성 이벤트를 유지해야하는 경우 event.persist()를 사용하십시오. 자세한 정보는 fb.me /react-event-pooling을 참조하십시오.

버전을 반응의 나 : "15.0.2"

가 잘 작동하지 않습니다 e.persist()을 보인다. 어떤 생각? : D

Answer 1

.persist를 이벤트와 동 기적으로 호출해야하는 경우 처리기를 비동기 적으로 호출 할 수 있습니다. 여기에 수정은 다음과 같습니다

class Tool extends React.Component { 
    constructor(props) { 
    super(props); 
    this._throttledMouseMove = _.throttle(this._throttledMouseMove.bind(this), 2000); 
    } 

    _throttledMouseMove = (e) => { 
    console.log(e.screenX); 
    } 

    render() {  
    return (
     <div ref="tool" className="tool"> 
     <div ref="toolBody" 
      className="tool__body" 
      onMouseMove={this._onMouseMove}> 
     </div> 
     </div> 
    ) 
    } 

    _onMouseMove = (e) => { 
    e.persist(); 
    this._throttledMouseMove(e); 

    } 
} 
ReactDOM.render(<Tool/>, document.querySelector('.main')) 

관련 변경 사항은 이벤트에서 직접 _onMouseMove를 호출하고, 실제로 스로틀의 이벤트를 처리 할 수있는 두 번째 방법을 설정하는 것입니다.