如何仅在用户停止输入时开始搜索? [英] How to start search only when user stops typing?

问题描述

我需要在用户停止输入时执行搜索.我知道我应该使用 setTimeout() .但是使用 Reactjs 我无法找到它是如何工作的. 有人可以告诉我如何在用户停止输入几秒钟(假设 5)时调用方法(将处理搜索).我想不通找出在哪里编写代码以检查用户是否已停止输入.

import React, {Component, PropTypes} from 'react';导出默认类 SearchBox 扩展组件 {状态={名称:" "，}更改名称 = (事件) =>{this.setState({name: event.target.value});}sendToParent = () =>{this.props.searching(this.state.name);}使成为() {返回 (<div><input type="text" placeholder='输入您要搜索的名称.'onChange={this.changeName}/>

);}}

我想在用户停止输入时调用 sendToParent 方法.

解决方案

你可以对你的代码使用 setTimeout 如下，

state = {名称: ''，打字:假，打字超时:0}更改名称 = (事件) =>{const self = this;如果(self.state.typingTimeout){clearTimeout(self.state.typingTimeout);}self.setState({名称:event.target.value，打字:假，打字超时:setTimeout(函数(){self.sendToParent(self.state.name);}, 5000)});}

另外，你需要在构造函数中绑定changeName处理函数.

构造函数(道具){超级(道具)；this.changeName = this.changeName.bind(this);}

I need to perform a Search when user stops typing.I know I am supposed to use setTimeout() . But with Reactjs I cant find how it works. Can someone please tell me how to invoke a method (that will handle Search) when the user stops typing for a few seconds (suppose 5).I cant figure out where to write the code to check that the user has stopped typing.

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>
        );
    }
}   

I want to invoke the sendToParent method when the user stops typing.

解决方案

You can use setTimeout with respect to your code as follows,

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)
    });
}

Also, you need to bind changeName handler function in constructor.

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

这篇关于如何仅在用户停止输入时开始搜索?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！