我的 lodash 反跳功能不适用于输入和 Reacttsx

Question

我将 lodash debounce 添加到我的输入中，我想使用它。我用 console.logs 检查了方法，但它从未进入去抖部分。

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

您可以使用解决方法：filterFeed = (value) => {//Pass the value, not the event&nbsp; &nbsp;&nbsp; &nbsp; let searchString = value&nbsp; &nbsp; let unfilteredFeed = this.unfilteredFeed;&nbsp; &nbsp; let filteredFeed = unfilteredFeed.filter(el => el.title.toLowerCase().includes(value.toLowerCase()));&nbsp; &nbsp; this.setState({&nbsp; &nbsp; &nbsp; input: searchString,&nbsp; &nbsp; &nbsp; feed: filteredFeed,&nbsp; &nbsp; &nbsp; filter: true&nbsp; &nbsp; })&nbsp; }还有你的 JSX：<input className="basic-slide" id="name" type="text" value={this.state.input} placeholder="Event..." onChange={(e)=>{&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; const value = e.target.value;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; this.debouncedFilterFeed(value)&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }} /><label >Suche</label>

Answer 2

在尝试了不同的事情之后，我找到了我的解决方案：filterFeed= debounce((text) =>{&nbsp; &nbsp; let searchString = text;&nbsp; &nbsp; let unfilteredFeed: any = this.unfilteredFeed;&nbsp; &nbsp; let filteredFeed: any = unfilteredFeed.filter(el => el.title.toLowerCase().includes(searchString.toLowerCase()));&nbsp; &nbsp; 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&nbsp; => this.filterFeed(e.target.value)} /><label >Suche</label>

Answer 3

您需要将传递给 debounce 的整个函数包装起来onChange并保存其引用：filterFeed = (event: any) => {&nbsp; // event.preventDefault()&nbsp; event.persist();&nbsp; let searchString = event.target.value;&nbsp; let unfilteredFeed: any = this.unfilteredFeed;&nbsp; let filteredFeed: any = unfilteredFeed.filter(el => el.title.toLowerCase().includes(event.target.value.toLowerCase()));&nbsp; this.setState({&nbsp; &nbsp; input: searchString,&nbsp; &nbsp; feed: filteredFeed,&nbsp; &nbsp; filter: true&nbsp; })}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>