Taro的在<Input>的onInput方法中如果使用setState来保存value,会导致输入卡顿,原因是用户在输入时,一直在setState
我的解决方案是使用debounce(防抖),事件和函数执行之间加了一个控制层,来控制函数的执行次数。
第一种方法是下载debounce插件
下载
$ npm install debounce
引入
import { debounce } from "debounce";
使用
<Input
className="tc-form-item-text"
type="text"
placeholder="请输入发票抬头"
onConfirm={() => { }}
value={title}
onInput={debounce(e => { this.setState({ title: e.detail.value }) }, 1000)}
}}
maxLength={120}
/>
或者自己定义一个函数,要求简单的可以使用
const debounce = (func, wait,immediate) => {
let timeout
return function (...args) {
clearTimeout(timeout)
timeout = setTimeout(() => {
timeout = null
if (!immediate) func.apply(this, args)
}, wait)
if (immediate && !timeout) func.apply(this, [...args])
}
}