React 中结合 antd 的 Input 组件实现防抖输入

在 React 中结合 antd 的 Input 组件实现防抖输入,可以通过以下几种方式实现:

1. 使用 useEffect 和 setTimeout

代码示例

import React, { useState, useEffect } from "react";
import { Input } from "antd";const DebouncedInput = () => {const [inputValue, setInputValue] = useState(""); // 即时输入值const [debouncedValue, setDebouncedValue] = useState(""); // 防抖后的值useEffect(() => {const timer = setTimeout(() => {setDebouncedValue(inputValue);}, 500); // 防抖延迟时间return () => {clearTimeout(timer); // 清除上一次的计时器};}, [inputValue]);return (<div><Inputplaceholder="输入文字试试"value={inputValue}onChange={(e) => setInputValue(e.target.value)}style={{ width: 300 }}/><p>即时输入值: {inputValue}</p><p>防抖值: {debouncedValue}</p></div>);
};export default DebouncedInput;

2. 使用 Lodash 的 debounce

安装 Lodash

npm install lodash

代码示例

import React, { useState, useCallback } from "react";
import { Input } from "antd";
import _ from "lodash";const DebouncedInput = () => {const [inputValue, setInputValue] = useState("");// 使用 useCallback 包装防抖函数const handleDebouncedChange = useCallback(_.debounce((value) => {console.log("防抖输入值: ", value);}, 500),[]);const handleChange = (e) => {const value = e.target.value;setInputValue(value);handleDebouncedChange(value); // 调用防抖函数};return (<div><Inputplaceholder="输入文字试试"value={inputValue}onChange={handleChange}style={{ width: 300 }}/></div>);
};export default DebouncedInput;

3. 使用自定义 Hook

创建 useDebounce Hook

import { useState, useEffect } from "react";export const useDebounce = (value, delay) => {const [debouncedValue, setDebouncedValue] = useState(value);useEffect(() => {const timer = setTimeout(() => {setDebouncedValue(value);}, delay);return () => {clearTimeout(timer);};}, [value, delay]);return debouncedValue;
};

代码示例

import React, { useState } from "react";
import { Input } from "antd";
import { useDebounce } from "./useDebounce";const DebouncedInput = () => {const [inputValue, setInputValue] = useState("");const debouncedValue = useDebounce(inputValue, 500); // 延迟 500msreturn (<div><Inputplaceholder="输入文字试试"value={inputValue}onChange={(e) => setInputValue(e.target.value)}style={{ width: 300 }}/><p>即时输入值: {inputValue}</p><p>防抖值: {debouncedValue}</p></div>);
};export default DebouncedInput;

4. 优化 Antd 的 Input 组件

Antd 的 Input 支持 onChange,可以直接配合上面任意一种防抖实现方法。以下是一个完整示例,结合 useDebounce:

import React, { useState } from "react";
import { Input } from "antd";
import { useDebounce } from "./useDebounce";const DebouncedInput = () => {const [inputValue, setInputValue] = useState("");const debouncedValue = useDebounce(inputValue, 500);const handleInputChange = (e) => {setInputValue(e.target.value);};return (<div><Inputplaceholder="输入文字试试"value={inputValue}onChange={handleInputChange}style={{ width: 300 }}/><p>即时输入值: {inputValue}</p><p>防抖值: {debouncedValue}</p></div>);
};export default DebouncedInput;

总结

直接实现防抖:用 useEffect 和 setTimeout。
使用第三方库:Lodash 的 debounce 是非常方便的解决方案。
封装 Hook:自定义 useDebounce 可以复用,适合更复杂的项目。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/pingmian/66046.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

把vue项目或者vue组件发布成npm包或者打包成lib库文件本地使用

将vue项目发布成npm库文件&#xff0c;第三方通过npm依赖安装使用&#xff1b;使用最近公司接了一个项目&#xff0c;这个项目需要集成到第三方页面&#xff0c;在第三方页面点击项目名称&#xff0c;页面变成我们的项目页面&#xff1b;要求以npm库文件提供给他们&#xff1b;…

STM32 NOR FLASH(SPI FLASH)驱动移植(2)

2&#xff09;FLASH 读取函数 /* * brief 读取 SPI FLASH * note 在指定地址开始读取指定长度的数据 * param pbuf : 数据存储区 * param addr : 开始读取的地址(最大 32bit) * param datalen : 要读取的字节数(最大 65535) * retval 无 */ void norflash_read(uint8_t *pbuf…

自从学会Git,感觉打开了一扇新大门

“同事让我用 Git 提交代码&#xff0c;我居然直接把项目文件压缩发过去了……”相信很多初学者都经历过类似的窘境。而当你真正掌握 Git 时&#xff0c;才会发现它就像一本魔法书&#xff0c;轻松解决代码管理的种种难题。 为什么 Git 能成为程序员的标配工具&#xff1f;它究…

【重庆】《政务数字化应用费用测算规范》(T/CDCIDA 001—2023)-省市费用标准解读系列36

《政务数字化应用费用测算规范&#xff08;报批稿&#xff09;》于2023年11月18日实施&#xff0c;本文件按照GB/T 1.1-2020给出的规则起草&#xff0c;主要适用于重庆政务数字化应用项目的费用测算。我司基于专业第三方信息化项目造价机构角度&#xff0c;从标准创新点、定制软…

Python | 学习type()方法动态创建类

getattr方法的使用场景是在访问不存在的属性时&#xff0c;会触发该方法中的处理逻辑。尤其是在动态属性获取中结合 type()动态创建类有着良好的使用关系。 type()方法常用来判断属性的类别&#xff0c;而动态创建类不常使用&#xff0c;通过如下的几个实例来学习使用&#xff…

机器学习之逻辑回归算法、数据标准化处理及数据预测和数据的分类结果报告

逻辑回归算法、数据标准化处理及数据预测和数据的分类结果报告 目录 逻辑回归算法、数据标准化处理及数据预测和数据的分类结果报告1 逻辑回归算法1.1 概念理解1.2 算法导入1.3 算法优缺点 2 LogisticRegression理解2.1查看参数定义2.2 参数理解2.3 方法2.4基本格式 3 数据标准…

.NET在中国的就业前景:开源与跨平台带来的新机遇

随着技术的不断发展和市场需求的变化&#xff0c;.NET在中国的就业前景正变得愈加广阔。尤其是在开源和跨平台的推动下&#xff0c;越来越多的中国中小型企业选择了.NET技术作为其开发平台&#xff0c;进一步提升了.NET技术人才的市场需求。尽管在中国市场&#xff0c;.NET的市…

Linux(Ubuntu24.04)源码编译安装VTK7.1.1记录

VTK&#xff08;Visualization Toolkit&#xff09;是一个开源的3D可视化开发工具包&#xff0c;用于开发可视化和图形处理应用程序。VTK提供了一系列的算法和工具&#xff0c;用于创建、渲染和处理复杂的3D图形和数据。VTK由C编写&#xff0c;并提供了Python、Java和Tcl等语言…

Hadoop解决数据倾斜方法

数据倾斜是指在分布式数据处理过程中&#xff0c;数据在某些节点上的分布不均匀&#xff0c;导致这些节点的处理负载过重&#xff0c;而其他节点的资源闲置&#xff0c;从而影响整个系统的性能。在 Hadoop 中&#xff0c;以下是一些解决数据倾斜的方法&#xff1a; 1. 数据预处…

【人工智能】人工智能与大模型

人工智能与大模型的结合正在深刻改变多个行业和领域的格局。 1. 人工智能 (AI) 人工智能指的是使计算机或机器具备模拟人类智能的能力&#xff0c;包括学习、推理、问题解决、自然语言处理、视觉感知等。AI的发展可以分为几个阶段&#xff1a; 弱人工智能 (Narrow AI)&#…

安卓11 SysteUI添加按钮以及下拉状态栏的色温调节按钮

最近客户想要做一个台灯产品&#xff0c;需要实现 串口调节台灯功能 &#xff0c;其中包括 亮度调节 色温调节 开关 三个功能 话不多说&#xff0c;贴代码 diff --git a/packages/SystemUI/AndroidManifest.xml b/packages/SystemUI/AndroidManifest.xml old mode 100644 new …

node.js下载、安装、设置国内镜像源(永久)(Windows11)

目录 node-v20.18.0-x64 工具下载安装设置国内镜像源&#xff08;永久&#xff09; node-v20.18.0-x64 工具 系统&#xff1a;Windows 11 下载 官网https://nodejs.org/zh-cn/download/package-manager 版本我是跟着老师选的node-v20.18.0-x64如图选择 Windows、x64、v2…

如何轻松安全地销售旧 Android 手机

众所周知&#xff0c;手机不断更新换代。当您想要的手机终于到货时&#xff0c;您可能迫不及待地将旧 Android 手机更新为最新手机。在此之前&#xff0c;你们中的一些人可能会考虑以最多的钱卖掉旧的Android手机。 但永远不要冲动地卖掉你的旧 Android 手机&#xff01;为了安…

欧科云链研究院:ChatGPT 眼中的 Web3

编辑&#xff5c;OKG Research 转眼间&#xff0c;2024年已经进入尾声&#xff0c;Web3 行业经历了热闹非凡的一年。今年注定也是属于AI的重要一年&#xff0c;OKG Research 决定拉上 ChatGPT 这位“最懂归纳的AI拍档”&#xff0c;尝试把一整年的研究内容浓缩成精华。我们一共…

【从零开始入门unity游戏开发之——unity篇04】unity6基础入门——场景窗口(Scene)和层级窗口(Hierarchy)介绍

文章目录 场景窗口&#xff08;Scene&#xff09;和层级窗口&#xff08;Hierarchy&#xff09;一、层级窗口&#xff08;Hierarchy&#xff09;1、添加新的对象&#xff08;物体&#xff09;2、Hierarchy层级窗口快捷键3、搜索 二、Scene场景窗口1、工具栏控制台2、操作物体位…

Jboss EnhancedQueueExecutor 使用案例及源码解读

使用案例 EnhancedQueueExecutor配置类 Configuration Slf4j public class EnhancedQueueExecutorConfig {Beanpublic EnhancedQueueExecutor enhancedQueueExecutor() {return createExecutor(5, 100,"enhancedQueueExecutor","任务处理失败 {}");}priv…

如何确保涡度通量观测数据的准确性?涡度通量光敏感性分析、温度敏感性分析、数据风浪区分析等

确保涡度通量观测数据的准确性&#xff0c;可以采取以下几个步骤&#xff1a; 1.数据预处理&#xff1a;在进行数据分析之前&#xff0c;需要对原始的高频涡度通量数据进行预处理&#xff0c;包括剔除异常值和进行数据缺失插补。异常值剔除可以通过设定合理的阈值来识别并剔除数…

docker镜像构建(基于ISO)

1. 前言 本文详细介绍如何基于kylin v10 ISO文件构建出docker image。系统环境如下&#xff1a; dockder: 20.10.7 linux os: kylinv 10 (GFB) linux kernel: 4.19.90-52.23.v2207.gfb01.ky10.aarch642. 构建yum离线源 2.1. 挂载ISO文件 mount Kylin-Server…

Mac中配置vscode(第一期:python开发)

1、终端中安装 xcode-select --install #mac的终端中安装该开发工具 xcode-select -p #显示当前 Xcode 命令行工具的安装路径注意&#xff1a;xcode-select --install是在 macOS 上安装命令行开发工具(Command Line Tools)的关键命令。安装的主要组件包括&#xff1a;C/C 编…

快速将索尼手机联系人导出为 HTML 文件

我想将 Sony Xperia 手机上的联系人导出到计算机上进行备份&#xff0c;并在需要时进行编辑。这可以做到吗&#xff1f;如何做到&#xff1f;作为助手我需要下载什么工具吗&#xff1f; 当您的 Android 手机上存储了如此多的重要联系人&#xff0c;而您又不想丢失它们时&#…