React.js Throttle MouseMove continuare a lanciare event.persist() Errore

Question

ho bisogno di strozzare l'evento MouseMove, e seguo i suggerimenti di seguito per costruire il metodo, ma non funziona: Perform debounce in React.js

Ecco il mio codice (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) 
    } 
} 

Se si mantiene MouseMove sul tool__body, si otterrà un sacco di sotto di avvertimento:

Attenzione: questo s l'evento yththetic viene riutilizzato per motivi di prestazioni. Se stai vedendo questo, stai accedendo alla proprietà screenX su un evento sintetico rilasciato/annullato. Questo è impostato su null. Se devi mantenere l'evento sintetico originale in giro, usa event.persist(). Vedi fb.me/react-event-pooling per maggiori informazioni.

la mia reagiscono versione: "15.0.2"

Sembra e.persist() non funziona bene. Qualche idea? : D

Answer 1

e.persist deve essere chiamato in modo sincrono con l'evento, il gestore può essere chiamato in modo asincrono. Ecco una correzione:

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

Il cambiamento in questione sta chiamando _onMouseMove direttamente dall'evento, e la creazione di un secondo metodo per gestire in realtà evento che è stato strozzato.