input onChange中setState问题 reactjs

Question

由于不想一直setState，想输入停止后再去 setstate，于是网上找了些方法，使用方法是用debounce

我参考下面代码，如果input里面加上value，不管我怎么输，为什么最后只能输出第一个字符出来？
比如我输入589632147,最后只能输出5

原链接

http://billqiu.github.io/2017/10/15/how-to-debounce-in-react/

//稍微改了下，input里面加了value

import react, { Component } from 'react';import { debounce } from 'lodash.debounce';

export default class Debounce extends Component {
  construtor() {    super();    this.callAjax = debounce(this.callAjax, 300);
  }
  
  callAjax = (value) => {
    console.log('value :: ', value);    this.setState({inputValue:value})    // call ajax
  }
  printChange(e) {
    e.persist();    this.callAjax(e.target.value);
  }
  render() {    return (
      <div>
        <input onChange={this.printChange} value={this.state.inputValue} />
      </div>
    );
  }
}

Answer 1

import&nbsp;React,&nbsp;{&nbsp;Component&nbsp;}&nbsp;from&nbsp;'react';let&nbsp;timeout;export&nbsp;default&nbsp;class&nbsp;Debounce&nbsp;extends&nbsp;Component&nbsp;{&nbsp;&nbsp;constructor(props)&nbsp;{&nbsp;&nbsp;&nbsp;&nbsp;super(props);&nbsp;&nbsp;&nbsp;&nbsp;this.state&nbsp;=&nbsp;{&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;text:&nbsp;'' &nbsp;&nbsp;&nbsp;&nbsp;} &nbsp;&nbsp;} &nbsp;&nbsp;debounce&nbsp;=&nbsp;(fn,&nbsp;wait)&nbsp;=>&nbsp;{&nbsp;&nbsp;&nbsp;&nbsp;if&nbsp;(timeout&nbsp;!==&nbsp;null)&nbsp;clearTimeout(timeout); &nbsp;&nbsp;&nbsp;&nbsp;timeout&nbsp;=&nbsp;setTimeout(fn,&nbsp;wait);&nbsp;&nbsp;&nbsp;&nbsp;console.log(timeout); &nbsp;&nbsp;} &nbsp;&nbsp;handleChange&nbsp;=&nbsp;(e)&nbsp;=>&nbsp;{&nbsp;&nbsp;&nbsp;&nbsp;const&nbsp;text&nbsp;=&nbsp;e.target.value;&nbsp;&nbsp;&nbsp;&nbsp;this.debounce(()&nbsp;=>&nbsp;{&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;this.setState({ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;text &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}) &nbsp;&nbsp;&nbsp;&nbsp;},&nbsp;1000); &nbsp;&nbsp;} &nbsp;&nbsp;render()&nbsp;{&nbsp;&nbsp;&nbsp;&nbsp;return&nbsp;(&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<div&nbsp;> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<input&nbsp;onChange={this.handleChange}></input> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span>{this.state.text}</span> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</div>) &nbsp;&nbsp;} }