react组件封装input框的防抖处理的项目实现

react input框防抖 react 输入框防抖 2023-05-18 05:05:17 155人浏览泡泡鱼

摘要

目录防抖1.类组件版本2.函数组件版本防抖防抖就是指触发事件后在 n 秒内函数只能执行一次，如果在 n 秒内又触发了事件，则会重新计算函数执行时间项目中有些input框需要做防抖

防抖

防抖就是指触发事件后在 n 秒内函数只能执行一次，如果在 n 秒内又触发了事件，则会重新计算函数执行时间

项目中有些input框需要做防抖处理，防止每次输入都要发起请求或者做判断，也就是减少触发频率，以便提高性能，避免资源浪费

1.类组件版本

//防抖的方法
const debounceOther = (func, wait = 800) => {
  let timeout; // 定时器变量
  return function () {
    clearTimeout(timeout); // 每次触发时先清除上一次的定时器,然后重新计时
    timeout = setTimeout(() => {
      func(arguments);
    }, wait); // 指定 xx ms 后触发真正想进行的操作 handler
  };
};

在项目中经常会将许多方法或复用性较高的事件封装，然后在页面引入

例：

防抖只需要看下面例子中getInputValue和inputChange即可

这是基于antd封装的一个弹窗组件，在input框需要判断输入后是否与原有值重复，不做防抖处理则输入一次判断一次

这里是将有封装好的debounceOther函数的js文件直接引入到这个组件中使用了

import { debounceOther } from ".........";
class RelationModal extends Component {
  state = { visible: false, inputErr: '', inputValue: '' };
  getInputValue = debounceOther(() => {
    let { specSelect } = this.props;    //原有数据
    //是否存在相同的
    let index = specSelect.findIndex(item => item.group === this.state.inputValue);
    this.setState({
      inputErr: index === -1 ? "" : '节点名称不允许重复'
    })
  },500)
  //拿到inputValue input输入框有变化500毫秒后 调用防抖方法 
  inputChange = e => {
    this.setState({
      inputValue:e.target.value
    },()=>{
      this.getInputValue()
    }) 
  };
}

2.函数组件版本

useCallback的作用其实是用来避免子组件不必要的reRender

import {useRef,useCallback,useEffect} from 'React'
function useDebounce(fn,delay,setval){
  const {current}=useRef({fn,timer:null})
  useEffect(()=>{
    current.fn=fn
  },[fn])
  return useCallback((e)=>{
    setval(e.target.value)
    if(current.timer){
        clearTimeout(current.timer)
    }
    current.timer=setTimeout(()=>{
        current.fn(e)
    },delay)
  })
}
export default useDebounce

调用

import debounce from '../utils/debounce'
import {useState} from 'react'
function My(){
    let [val,setval]=useState('')
    const inputval=debounce(()=>{
        console.log(val);
    },1000,setval)
    return <div>
       <input type="text" value={val} onChange={(e)=>inputval(e)}/>
    </div>
}
export default My

到此这篇关于react组件封装input框的防抖处理的项目实现的文章就介绍到这了,更多相关react input框防抖内容请搜索编程网以前的文章或继续浏览下面的相关文章希望大家以后多多支持编程网！

点击免费下载>>软考高级考试备考技巧/历年真题/备考精华资料

--结束END--

本文标题: react组件封装input框的防抖处理的项目实现

本文链接: https://www.lsjlt.com/news/211674.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341