React.js节流器mousemove事件不断抛出event.persist（）错误

小编典典

React.js节流器mousemove事件不断抛出event.persist（）错误

reactjs

我需要限制mousemove事件，然后按照以下提示构建方法，但是不起作用：
在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)
  }
}

如果您将鼠标悬停在上tool__body，将会收到很多以下警告：

警告：出于性能原因，此合成事件已被重用。如果看到此消息，说明您正在通过已screenX发布/无效的综合事件访问该属性。设置为空。如果必须保留原始的合成事件，请使用event.persist（）。有关更多信息，请参见fb.me/react-
event-pooling。

我的反应版本：“ 15.0.2”

似乎e.persist()效果不佳。任何想法？：D

阅读 716

2020-07-22

共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，并设置第二种方法来实际处理被限制的事件。

2020-07-22