React Antd 延时input事件

布满荆棘的人生 2021-09-24 12:16 578阅读 0赞

### React 延时input事件 ###

*   *  先来看看setInterval和setTimeout的区别
     *  代码

## 先来看看setInterval和setTimeout的区别 ##

*  setInterval() 设定时间后会一直按间隔时间执行
 *  setTimeOut() 设定时间后，会在设定时间后执行

## 代码 ##

let dsq = setInterval(()=>{ 		// 设置定时器
        let search = document.querySelector(".search input");	// 获取搜索框dom
        if(search) { 
            clearInterval(dsq);
            search.oninput = ()=>{ 
                let t = setTimeout(()=>{ 
                    clearTimeout(t);
                    // 获取输入的值
                    let value = search.getAttribute("value").trim();
                    if(value){ 
                    	// 延时处理函数
                        this.popSearchCard(value);
                    }else{ 
                    	// 修改state数据
                        this.state.searchCard={ 
                            searchCard:"",
                            selectedKey:"",//选中的 配合 search 使用
                            expandKeys:this.state.searchCard.expandKeys,
                        };
                        this.setState(
                            this.state
                        )
                    }
                },300)
            }
        }
    },500);

发表评论取消回复

表情：

评论列表（有 0 条评论，578人围观）

还没有评论，来说两句吧...

相关阅读

相关 react antd的tab标签切换时调用方法

源码： //defaultActiveKey:默认选择的版面 //activeKey：切换后的版面 <Tabs defaultActiveKey="0" active

今天药忘吃喽~/ 2023年05月30日 04:59/ 0 赞/ 18 阅读

相关学习笔记——input标签作为搜索框时延时查询

> 在前端开发过程，有时会有以下需求：使用input标签作为搜索框，在搜索框中输入内容查询相关结果，类似于百度搜索。 > > 这里主要使用输入框的keyup事件。 ----

亦凉/ 2023年01月12日 11:38/ 0 赞/ 139 阅读

相关 react +ts class antd input 接口返回数据回显_使用 react hooks 获取全局数据

![ad5ed8f3ddee17d49d9a6e85004af359.png][] 随着 react@16.8 hooks 的正式发布，如何优雅的使用 hooks 成了值得我

朴灿烈づ我的快乐病毒、/ 2022年10月28日 00:50/ 0 赞/ 26 阅读

相关 react实现input搜索框延时发送请求

const onKeywordsChange = debounce((v: any) => { setSalePkgName(v); // 80

喜欢ヅ旅行/ 2022年10月17日 11:12/ 0 赞/ 197 阅读

相关 REACT_react使用antd-mobile UI框架

安装 > npm install antd-mobile --save public/index.html <script src="https://as.ali

怼烎@/ 2022年10月11日 01:08/ 0 赞/ 232 阅读

相关 jQuery – 鼠标经过(hover)事件的延时处理

一、关于鼠标hover事件及延时鼠标经过事件为web页面上非常常见的事件之一。简单的hover可以用CSS :hover伪类实现，复杂点的用js。一般情况下，我们是

曾经终败给现在/ 2022年08月26日 13:27/ 0 赞/ 231 阅读

相关 react使用Antd表格

react使用Antd表格 1.表格中插入图标或者选择框需要用到columns中的render回调 columns: [ {

不念不忘少年蓝@/ 2022年01月22日 09:57/ 0 赞/ 469 阅读

相关 React Antd 延时input事件

React 延时input事件先来看看setInterval和setTimeout的区别代码先来看看setInterval和setTi

布满荆棘的人生/ 2021年09月24日 12:16/ 0 赞/ 579 阅读

相关 react使用antd mobile

Ant-design框架 1. create-react-app antd 2. npm install antd-mobile --

向右看齐/ 2021年07月25日 13:29/ 0 赞/ 501 阅读

相关 react 配置antd

1、安装 cnpm install antd -D cnpm install -D craco-less 2、在根目录与src同级

小咪咪/ 2021年07月24日 11:55/ 0 赞/ 456 阅读