React.js drosseln mousemove- Ereignis halten werfen event.persist() Fehler

Question

ich die mousemove- Ereignis drosseln müssen, und ich folgen Sie den nachstehenden Tipps, um die Methode zu bauen, aber nicht funktioniert: Perform debounce in React.js

Hier mein Code (http://jsbin.com/binesofepo/edit?js,console,output):

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) 
    } 
} 

Wenn Sie mousemove- auf dem tool__body halten, es werden viele unter Warnung erhalten:

Achtung: s Dieses Ereignis wird aus Leistungsgründen erneut verwendet. Wenn Sie dies sehen, greifen Sie auf die Eigenschaft screenX bei einem freigegebenen/annullierten synthetischen Ereignis zu. Dies wird auf null gesetzt. Wenn Sie das ursprüngliche synthetische Ereignis beibehalten müssen, verwenden Sie event.persist(). Weitere Informationen finden Sie unter fb.me/react-event-pooling.

meine Version reagieren: "15.0.2"

Scheint e.persist() nicht gut funktioniert. Irgendeine Idee? : D

Answer 1

e.persist synchron mit dem Ereignis aufgerufen werden muss, kann der Handler asynchron aufgerufen werden. Hier ist ein fix:

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

Die entsprechende Änderung _onMouseMove direkt von der Veranstaltung ruft, und ein zweites Verfahren einrichten, um tatsächlich Ereignis zu behandeln, die gedrosselt worden ist.