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

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

1. 使用 useEffect 和 setTimeout

代码示例

js 复制代码
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>
            <Input
                placeholder="输入文字试试"
                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

bash 复制代码
npm install lodash

代码示例

js 复制代码
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>
            <Input
                placeholder="输入文字试试"
                value={inputValue}
                onChange={handleChange}
                style={{ width: 300 }}
            />
        </div>
    );
};

export default DebouncedInput;

3. 使用自定义 Hook

创建 useDebounce Hook

js 复制代码
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;
};

代码示例

js 复制代码
import React, { useState } from "react";
import { Input } from "antd";
import { useDebounce } from "./useDebounce";

const DebouncedInput = () => {
    const [inputValue, setInputValue] = useState("");
    const debouncedValue = useDebounce(inputValue, 500); // 延迟 500ms

    return (
        <div>
            <Input
                placeholder="输入文字试试"
                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:

js 复制代码
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>
            <Input
                placeholder="输入文字试试"
                value={inputValue}
                onChange={handleInputChange}
                style={{ width: 300 }}
            />
            <p>即时输入值: {inputValue}</p>
            <p>防抖值: {debouncedValue}</p>
        </div>
    );
};

export default DebouncedInput;

总结

直接实现防抖:用 useEffect 和 setTimeout。

使用第三方库:Lodash 的 debounce 是非常方便的解决方案。

封装 Hook:自定义 useDebounce 可以复用,适合更复杂的项目。

相关推荐
Jacob02342 分钟前
JavaScript 模块系统二十年:混乱、分裂与出路
前端·javascript
独立开阀者_FwtCoder7 分钟前
Vite Devtools 要发布了!期待
前端·面试·github
独立开阀者_FwtCoder7 分钟前
国外最流行的 UI 组件库!适配 Vue、React、Angular!
前端·vue.js·后端
CodeSheep15 分钟前
小米汽车这薪资是认真的吗?
前端·后端·程序员
白白李媛媛20 分钟前
上传Vue3+vite+Ts组件到npm官方库保姆级教程
前端·arcgis·npm
晴殇i28 分钟前
前端内容保护:如何有效防止用户复制页面内容?
前端·javascript·css
程序猿阿伟33 分钟前
《声音的变形记:Web Audio API的实时特效法则》
开发语言·前端·php
凌览36 分钟前
有了 25k Star 的MediaCrawler爬虫库加持,三分钟搞定某红书、某音等平台爬取!
前端·后端·python
万少38 分钟前
2-自然壁纸实战教程-AGC 新建项目
前端·harmonyos
满分观察网友z1 小时前
别小看这个滑动条!从性能灾难到用户挚爱的 uni-app Slider 踩坑实录
前端