Мой ответ от loda sh не работает с вводом и Reacttsx - PullRequest
Новая
       7

Мой ответ от loda sh не работает с вводом и Reacttsx

0 голосов
/ 12 марта 2020

Я добавил отладку loda sh в свой ввод, и я хочу использовать ее. Я проверил метод console.logs, но он никогда не входит в раздел 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>

Ответы [ 3 ]

0 голосов
/ 12 марта 2020

Попробовав разные вещи, я нашел свое решение: 

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>
0 голосов
/ 12 марта 2020

Вы можете использовать обходной путь: 

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>
0 голосов
/ 12 марта 2020

Вам нужно обернуть всю передаваемую функцию 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>
...