React和lodash：在保持事件的同时对函数应用油门或去抖动

Question

我有一个相对简单的组件，如下所示（简化）

class MouseListener extends Component {
  static propTypes = {
    children: PropTypes.element,
    onMouseMove: PropTypes.func.isRequired
  };
  container = null;
  onMouseMove = debounce(e => {
    e.persist();
    const { clientX, clientY } = e;
    const { top, left, height, width } = this.container.getBoundingClientRect();
    const x = (clientX - left) / width;
    const y = (clientY - top) / height;

    this.props.onMouseMove(x, y);
  }, 50);
  render() {
    return (<div
      ref={e => this.container = e}
      onMouseMove={this.onMouseMove}
    >
      {this.props.children}
    </div>);
  }
}

但是，每当触发onMouseMove时，它都表示该事件已经过去。我希望能够使用e.persist()将它保留在池中，以使此事件处理程序异步运行。

在React中绑定debounced事件处理程序的适当方法是什么？