React.js控制鼠标移动事件保持抛出event.persist()错误

React.js throttle mousemove event keep throwing event.persist() error

本文关键字：event persist 错误 控制 js 鼠标 移动 事件 React      更新时间：2023-09-26

我需要限制鼠标移动事件，我按照下面的提示来构建方法，但不起作用:在React.js中执行debounce

下面是我的代码(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。它被设置为null。如果必须保留原始合成事件，请使用event.persist()。看到facebook。Me/react-事件池获取更多信息。

my react version: "15.0.2"

似乎e.persist()不起作用。任何想法?: D

持久化需要与事件同步调用，处理程序可以异步调用。下面是一个修复:

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

带钩子:

const Tool = () => {
  const onMouseMove = useMemo(() => {
    const throttled = _.throttle(e => console.log(e.screenX), 300);
    return e => {
      e.persist();
      return throttled(e);
    };
  }, []);
  return (
    <div className="tool">
      <div className="tool__body" onMouseMove={onMouseMove}>
        Content
      </div>
    </div>
  );
};
相关文章：