当前位置：首页 > news >正文

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

news 2025/1/6 16:37:55

在 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;