我的 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   

    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>

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

您需要将传递给 debounce 的整个函数包装起来onChange并保存其引用：

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>