我从lodash的debounce不适用于input和Reactsx

Question

我在输入中添加了lodash debounce，我想使用它。我用console.log检查了方法，但它从未进入debounce部分。

const debounce = require('lodash/debounce');
filterFeed(event: any){
// event.preventDefault()
event.persist();
debounce(() => {
let searchString = event.target.value;
let unfilteredFeed: any = this.unfilteredFeed;
let filteredFeed: any = unfilteredFeed.filter(el => el.title.toLowerCase().includes(event.target.value.toLowerCase()));
this.setState({ input: searchString, feed: filteredFeed, filter: true })
}, 300);
}
<input className="basic-slide" id="name" type="text" value={this.state.input} placeholder="Event..." onChange={ this.filterFeed.bind(this)} /><label >Suche</label>

Answer 1

您需要将传递给onChange的整个函数封装在debounce中，并保存其引用：

filterFeed = (event: any) => {
// event.preventDefault()
event.persist();
let searchString = event.target.value;
let unfilteredFeed: any = this.unfilteredFeed;
let filteredFeed: any = unfilteredFeed.filter(el => el.title.toLowerCase().includes(event.target.value.toLowerCase()));
this.setState({
input: searchString,
feed: filteredFeed,
filter: true
})
}
debouncedFilterFeed = debounce(this.filterFeed, 300);

<input className="basic-slide" id="name" type="text" value={this.state.input} placeholder="Event..." onChange={this.debouncedFilterFeed} /><label >Suche</label>

Answer 2

在尝试了不同的东西后，我找到了我的解决方案：

filterFeed= debounce((text) =>{
let searchString = text;
let unfilteredFeed: any = this.unfilteredFeed;
let filteredFeed: any = unfilteredFeed.filter(el => el.title.toLowerCase().includes(searchString.toLowerCase()));
this.setState({ input: searchString, feed: filteredFeed, filter: true })
}, 20)
<input className="basic-slide" id="name" type="text" value={this.state.input} placeholder="Event..." onChange={e  => this.filterFeed(e.target.value)} /><label >Suche</label>

Answer 3

您可以使用一个变通方法：

filterFeed = (value) => {//Pass the value, not the event   
let searchString = value
let unfilteredFeed = this.unfilteredFeed;
let filteredFeed = unfilteredFeed.filter(el => el.title.toLowerCase().includes(value.toLowerCase()));
this.setState({
input: searchString,
feed: filteredFeed,
filter: true
})
}

以及您的JSX:

<input className="basic-slide" id="name" type="text" value={this.state.input} placeholder="Event..." onChange={(e)=>{
const value = e.target.value;
this.debouncedFilterFeed(value)
}} /><label >Suche</label>