首頁(yè) 猿問(wèn) input...

input onChange中setState問(wèn)題 reactjs

JavaScript

繁星點(diǎn)點(diǎn)滴滴 2019-03-25 10:31:02

由于不想一直setState，想輸入停止后再去 setstate，于是網(wǎng)上找了些方法，使用方法是用debounce我參考下面代碼，如果input里面加上value，不管我怎么輸，為什么最后只能輸出第一個(gè)字符出來(lái)？比如我輸入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> ); } }關(guān)注 | 3收藏評(píng)論邀請(qǐng)回答編輯

查看完整描述

2 回答

明月笑刀無(wú)情

TA貢獻(xiàn)1828條經(jīng)驗(yàn) 獲得超4個(gè)贊

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>)
  }
}

反對(duì) 回復(fù) 2019-03-25