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里面加了valueimport 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 React, { Component } from 'react';let timeout;export default class Debounce extends Component {  constructor(props) {    super(props);    this.state = {      text: ''
    }
  }

  debounce = (fn, wait) => {    if (timeout !== null) clearTimeout(timeout);
    timeout = setTimeout(fn, wait);    console.log(timeout);
  }

  handleChange = (e) => {    const text = e.target.value;    this.debounce(() => {      this.setState({
        text
      })
    }, 1000);
  }

  render() {    return (      <div >
        <input onChange={this.handleChange}></input>
        <span>{this.state.text}</span>
      </div>)
  }
}