javascript - 如何在react中input-text设置一个定时器？

问题描述

问 题

我有一个搜索字段。现在它搜索每个键控。所以如果有人输入Windows，它将使用onChange方法进行搜索：W，Wi，Win，Wind，Windo，Window，Windows

我想要一个延迟，所以只有当用户停止输入200 ms时，才会进行搜索。

原代码

handleChange: function(event) {
  var newVal = event.target.value;
  this.setState({value: newVal});
    // 能否在这里加个定时器，判断大于200ms后再进行下面的方法
  this.doSearch();
},
doSearch: function() {
  someFunction(this.state.value);
},

.....

<input id="search-input" className={active} placeholder="Type to search" value={inputValue}   onChange={this.handleChange} />

解决方案

延迟是可以的，先清定时器，在加定时器就可以

handleChange: function(event) {
    var newVal = event.target.value;

    this.setState({value: newVal});

    this.timer && clearTimeout(this.timer);
    this.timer = setTimeout(() => {
        this.doSearch();
    }, 200)
}

这篇关于javascript - 如何在react中input-text设置一个定时器？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！