react防抖

最新推荐文章于 2025-01-03 15:17:47 发布

原创最新推荐文章于 2025-01-03 15:17:47 发布 · 453 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#react.js #javascript #前端

import { Input } from "antd";
import React, { useCallback, useState } from "react";

const A = () => {
const [input, setInput] = useState("");

// 定义一个防抖函数
const debounce = (fn, delay) => {
let timeout;
return function (...args) {
clearTimeout(timeout);
timeout = setTimeout(() => {
fn(...args);
}, delay);
};
};

const handleInputChange = (e) => {
const { value } = e.target;
setInput(value);
debouncedGetData(value); // 调用防抖函数
};

// 使用 debounce 包装处理函数
const debouncedGetData = useCallback(
debounce((value) => {
console.log(value);
}, 1000),
[]
);
return (
<div>
<Input value={input} onChange={handleInputChange} />
</div>
);
};

export default A;