Reactjs 仅当用户停止输入时如何开始搜索

发布于02月14日

当用户停止输入时，我需要执行搜索.我知道我应该用setTimeout().但是对于Reactjs I cant find how it works.，有人能告诉我，当用户停止输入几秒钟(假设5秒钟)时，如何调用一个方法(处理搜索).我不知道该在哪里编写代码来判断用户是否已停止键入.

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

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

推荐答案

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

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

此外，还需要在构造函数中绑定changeName个处理函数.

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

Reactjs相关问答推荐

MUImaterial -ui-如何将文本字段和 Select 分组？

在Redux工具包查询中，是否可以将标记应用到API切片内的所有端点？

Redux Provider Stuck甚至彻底遵循了文档

值在返回页面时不更新，即使我已经更新了它们

如何将图像(在代码中称为自己)定位在蓝色圈内的点上？我正在使用material UI和Reaction

NextJS如何正确保存添加到购物车中的产品会话

ReactJS：唯一项目的数量总和

点击页脚链接时，如何更改ReactJS导航栏中的活动菜单项(样式为Tailwind CSS)？

为什么 useEffect 的初始化对于加载 localStorage 不起作用？

React Router v6 路径中的符号

计数器递增 2 而不是 1

onChange in useEffect 的最佳实践

React Native应用如何订阅Supabase的实时数据？

使用 map 循环浏览列表列表中的列表并显示它们

React 中的 Slide API Mui 在开始而不是结束时触发侦听器

使用 React、Redux 和 Firebase 的无限循环

如何用实际的br标签替换axios响应中的br标签？

哪个 PrivateRouter 实现更好：高阶组件还是替换？

React - useParams() 不会失败 null / undefined 判断

Context Api React 的问题

实用课程推荐