DebounceLostProps.js

import React from 'react'
import { Debounce } from 'react-throttle'

var XPos = (props) => {
  return <div>
    x: {props.x}
  </div>
}

var YPos = (props) => {
  return <div>
    y: {props.y}
  </div>
}

class SelectEvent extends React.Component {
  constructor() {
    super();
    this.state = { x: 0, y: 0, mouseMove: {}};
    this.select = this.select.bind(this);
    this.click = this.click.bind(this);
    this.mouseMove = this.mouseMove.bind(this);
  }

  select(e) {
    console.log("select", e);
  }

  click(e) {
    console.log("click", e);
  }

  mouseMove(e) {
    e.persist();
    console.log(e);
    this.setState({ x: e.clientX, y: e.clientY, mouseMove: e });
  }

  componentDidUpdate() {
    console.log("componentDidUpdate");
  }

  render() {
    return <div>
      <h1 onSelect={this.select} onClick={this.click}>Select Example</h1>
      <p onSelect={this.select} onClick={this.click}>Using the select events</p>
      <Debounce time="500" handler="onClick">
        <input onSelect={this.select} onClick={this.click} type="text" />
      </Debounce>
      <Debounce time="500" handler="onMouseMove">
        <div onMouseMove={this.mouseMove}>
          <h2>Mouse Move</h2>
          <p>Detect mouse move</p>
          <XPos x={this.state.x} />
          <YPos y={this.state.y} />
        </div>
      </Debounce>
    </div>
  }
}
export default EventDemo;