Suchen in Reagieren, wenn Benutzer mit der Eingabe aufhört

Question

Ich muss eine Suche durchführen, wenn der Benutzer die Eingabe beendet. Ich weiß, dass ich setTimeout() verwenden soll. Aber mit Reactjs kann ich nicht finden, wie es funktioniert. Kann mir bitte jemand sagen, wie man eine Methode aufruft (die die Suche behandelt), wenn der Benutzer für ein paar Sekunden aufhört zu tippen (angenommen 5). Ich kann nicht herausfinden, wo der Code geschrieben werden muss, um zu überprüfen, dass der Benutzer die Eingabe beendet hat.

import React, {Component, PropTypes} from 'react'; 

export default class SearchBox extends Component { 

    state={ 
     name:" ", 
    } 

    changeName = (event) => { 
     this.setState({name: event.target.value}); 
    } 

    sendToParent =() => { 
     this.props.searching(this.state.name); 
    } 

    render() { 
     return (
      <div> 
       <input type="text" placeholder='Enter name you wish to Search.' onChange={this.changeName} /> 

      </div> 
     ); 
    } 
} 

Ich möchte die sendToParent-Methode aufrufen, wenn der Benutzer die Eingabe beendet.

Answer 1

Sie setTimeout in Bezug auf Ihrem Code verwenden können wie folgt

state = { 
    name: '', 
    typing: false, 
    typingTimeOut: 0 
} 
changeName = (event) => { 
    const self = this; 

    if (self.state.typingTimeout) { 
     clearTimeout(self.state.typingTimeout); 
    } 

    self.setState({ 
     name: event.target.value, 
     typing: false, 
     typingTimeout: setTimeout(function() { 
      self.sendToParent(self.state.name); 
     }, 5000) 
    }); 
} 

Außerdem müssen Sie changeName Handler-Funktion in Konstruktor binden.

constructor(props) { 
    super(props); 
    this.changeName = this.changeName.bind(this); 
} 

Answer 2

Problem von typeahead Bibliothek https://twitter.github.io/typeahead.js/

Da hier der Fall einfach ist, kann ich eine schnelle und schmutzige Lösung verwenden:

onChange: (event) -> 
    if @_timeoutTask? 
    clearTimeout @_timeoutTask 

    @_timeoutTask = setTimeout (=> 
    @sendToParent event.target.value 
    clearTimeout @_timeoutTask 
), 5000 

Auf diese Weise wird die Aufgabe ausgelöst wird 5s nach Eingabe-Ereignisse. Wenn ein neues Ereignis eintritt, wird die alte Aufgabe abgebrochen und eine neue Aufgabe wird geplant, dann warten weitere 5 Sekunden.

Der Unterschied in React ist, wo der Berechnungszustand wie _timeoutTask gespeichert werden soll. Der Dateibereich, der Komponentenstatus oder die Komponenteninstanz.

Da _timeoutTask Komponentenebene ist, sollte es global gespeichert werden. Und es wirkt sich nicht auf das Rendering aus, also auch nicht auf den Komponentenstatus. Daher empfehle ich, sie direkt an die Komponenteninstanz anzuhängen.

Answer 3

Sie können einfach das Debounce von lodash verwenden oder simulieren mit setTimeout.

import React, {Component, PropTypes} from 'react'; 

export default class SearchBox extends Component { 
    constructor(props){ 
     super(props); 
     this.state={ name:" "} 
     this.timeout = null; 

    } 

    changeName = (event) => { 
     clearTimeout(timeout); 
     if(timeout){ 
      setTimeout((event)=> this.setState({name: event.target.value}), 200) 
     } 
    } 

    sendToParent =() => { 
     this.props.searching(this.state.name); 
    } 

    render() { 
     return (
      <div> 
       <input type="text" placeholder='Enter name you wish to Search.' onChange={this.changeName} /> 

      </div> 
     ); 
    } 
} 

Answer 4

Eine andere Art und Weise, die mit mir gearbeitet:

class Search extends Component { 
    constructor(props){ 
    super(props); 
    this.timeout = 0; 
    } 

    doSearch(evt){ 
    var searchText = evt.target.value; // this is the search text 
    if(this.timeout) clearTimeout(this.timeout); 
    this.timeout = setTimeout(() => { 
     //search function 
    }, 300); 
    } 

    render() { 
    return (
     <div className="form-group has-feedback"> 
     <label className="control-label">Any text</label> 
     <input ref="searchInput" type="text" onChange={evt => this.doSearch(evt)} /> 
     </div> 
    ); 
    } 
}