首頁猿問我的 lodash...

我的 lodash 反跳功能不適用于輸入和 Reacttsx

Html5

繁星點點滴滴 2023-09-04 16:03:23

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

查看完整描述

3 回答

慕的地6264312

TA貢獻1817條經驗獲得超6個贊

您可以使用解決方法：

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>

反對回復 2023-09-04

守著星空守著你

TA貢獻1799條經驗獲得超8個贊

在嘗試了不同的事情之后，我找到了我的解決方案：

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>

反對回復 2023-09-04

慕哥6287543

TA貢獻1831條經驗獲得超10個贊

您需要將傳遞給 debounce 的整個函數(shù)包裝起來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>

反對回復 2023-09-04