Auto-increment logic on button "hold" causes infinite loop/freeze

See more:

ReactJS

ES6

Hi everyone,

I'm currently trying to implement a button long-press/hold for both mouse and touch events so that you can simply hold the button and have the component just keep increasing the element value until you let go. I'm not sure why, but even setting the state out of the loop logic, it still causes a freeze/infinite loop to occur. Maybe I need to circumvent this entirely and use some timing logic like 500ms?

Thanks in advance!

export default class Number extends Component {
  static propTypes = {
    onChange: PropTypes.func.isRequired
  }
  constructor(props) {
    super(props);
    this.handleChange = this.handleChange.bind(this);
    this.doneChange = this.doneChange.bind(this);
    this.state = {
      i: 0,
      pressed: false
    };
  }
  handleChange(i) {
    this.doneChange(true);
    let I = this.state.i;
    while (this.state.pressed) {
      I += i;
      if (I > 150) {
        I = 150;
      }
      if (I < 0) {
        I = 0;
      }
    }
    this.setState({
      i: I
    }, () => {
      this.props.onChange(this.state.i);
    });
  }
  doneChange(isPressed) {
    this.setState({
      pressed: isPressed
    });
  }

EDIT: For some odd reason, the edit here doesn't show the render code in code wrapping, so here here you go -

render() {
  const styles = require('./Number.scss');
  return (
    <div className={styles.number}>
      <button
        ><span>-</span></button>
      <div className={styles.numeral}>{this.state.i}</div>
      <button
        ><span>+</span></button>
    </div>);
}