[JavaScript知识库] 手写一个防抖功能，textarea文本框或者input框配合onKeyDown事件 react

开发: C++知识库 Java知识库 JavaScript Python PHP知识库人工智能区块链大数据移动开发嵌入式开发工具数据结构与算法开发测试游戏开发网络协议系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑笔记本显卡显示器固态硬盘硬盘耳机手机 iphone vivo oppo 小米华为单反装机图拉丁

-> JavaScript知识库 -> 手写一个防抖功能，textarea文本框或者input框配合onKeyDown事件 react -> 正文阅读

[JavaScript知识库]手写一个防抖功能，textarea文本框或者input框配合onKeyDown事件 react

先说一下我遇到的得需求，是需要复制粘贴文本然后在textarea中进行换行得，每一行要判断字符不能超过60个。所以就需要在填写得时候把字符推到一个数组里，进行遍历，判断每一项是否超过60个，超过得话就不能输入了。这里用到了三个方法，分别是tostring（）；split（）；spliceAll（）；
join（）；

// spliceAll是所有的，如果不写all是单个得。
// split是变成数组。
// join是变成字符串   \r是在textarea中换行符。
// \n是显示时候得换行符。
  const handelChange = (e) => {
    e.stopPropagation();
    arr = e.target.value.replaceAll("\n", ",").split(',');
    arr.forEach((item, index) => {
      if (item.length >= 60) {
        arr[index] = item.substring(0, 59);
        text.current.resizableTextArea.textArea.value = arr.join("\r");
        return message.warning("每行不能超过60字符");
      };
    });
  }

<TextArea rows={6} bordered={false} id="textArea" ref={text} onBlur={handelBlur} onKeyDown={debounce(handelChange, 300)}/>
// 如果文本写不上就用ref
const text = useRef(null);
  useEffect(() => {
    text.current.resizableTextArea.textArea.value = str;  // str就是你需要给它赋得值
  })

// 防抖
// 直接复制粘贴然后自己写onKeyDown事件，上边那个是我写的，能用得话直接用就ok
  function debounce(fn,delay) {
    let timer = null;
    return function() {
      let context = this,args = arguments;
      if(timer) {
      clearTimeout(timer);
      timer = null;
    }
    timer = setTimeout(()=> {
      fn.apply(context,args)
    },delay)
    }
  };