我需要限制 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)
}
}
如果你一直在tool__body
上移动mousemove,它会得到很多下面的警告:
Warning: This synthetic event is reused for performance reasons. If you're seeing this, you're accessing the property
screenX
on a released/nullified synthetic event. This is set to null. If you must keep the original synthetic event around, use event.persist(). See fb.me/react-event-pooling for more information.
我的 react 版本:“15.0.2”
似乎 e.persist()
效果不佳。任何的想法? :D
最佳答案
e.persist需要和事件同步调用,handler可以异步调用。这是一个修复:
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,并设置第二种方法来实际处理已被限制的事件。
关于javascript - React.js 节流 mousemove 事件不断抛出 event.persist() 错误,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/38142880/