react中防抖搜索框实现
时间: 2023-07-11 22:44:46 浏览: 86
在 React 中实现防抖搜索框,可以使用 useState 和 useEffect 钩子函数,以及 lodash 的 debounce 方法。
首先,在函数组件中定义一个搜索框的 state:
```
import React, { useState, useEffect } from 'react';
function SearchBox() {
const [searchTerm, setSearchTerm] = useState('');
// TODO: debounce search function
const handleSearch = (event) => {
setSearchTerm(event.target.value);
};
return (
<input type="text" value={searchTerm} onChange={handleSearch} />
);
}
export default SearchBox;
```
接着,使用 useEffect 钩子函数来监听 searchTerm 状态的变化,并在变化后调用 debounce 方法来限制搜索请求的频率:
```
import React, { useState, useEffect } from 'react';
import debounce from 'lodash/debounce';
function SearchBox() {
const [searchTerm, setSearchTerm] = useState('');
const debouncedSearch = debounce((searchTerm) => {
// TODO: Call API to search for searchTerm
}, 500);
const handleSearch = (event) => {
setSearchTerm(event.target.value);
};
useEffect(() => {
debouncedSearch(searchTerm);
}, [searchTerm]);
return (
<input type="text" value={searchTerm} onChange={handleSearch} />
);
}
export default SearchBox;
```
在上面的代码中,我们使用了 lodash 的 debounce 方法来创建一个 debouncedSearch 函数,它将在 500 毫秒内等待 searchTerm 状态的变化。当 searchTerm 状态变化时,useEffect 钩子函数将会调用 debouncedSearch 函数来执行搜索操作。
这样就可以实现一个防抖搜索框了。需要注意的是,这里使用的是函数组件,如果你使用的是类组件,可以在 componentDidMount 和 componentDidUpdate 生命周期中使用 debounce 方法来实现防抖搜索框。
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)