React.js душить MouseMove событие продолжать бросать event.persist() ошибка

Question

мне нужно душить MouseMove событие, и я следовать советам ниже, чтобы построить метод, но не работает: Perform debounce in React.js

Вот мой код (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) 
    } 
} 

Если вы держите MouseMove на tool__body, это будет получить много ниже предупреждения:

Внимание: Это S Событие ynthetic используется повторно для повышения производительности. Если вы видите это, вы получаете доступ к свойству screenX по выпущенному/завершенному синтезу событию. Это значение равно null. Если вы должны сохранить оригинальное синтетическое событие, используйте event.persist(). Для получения дополнительной информации см. Fb.me/react-event -pooling.

моей реагировать версии: "15.0.2"

Кажется e.persist() не работает хорошо. Есть идеи? : D

Answer 1

e.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 непосредственно с места событий, а также создание второй метод на самом деле обрабатывать событие, которое было задержано.