由于不想一直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>
);
}
}
2 回答
BIG陽
TA貢獻1859條經驗 獲得超6個贊
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>)
}
}添加回答
舉報
0/150
提交
取消