React输入框如何在用户开始与停止输入时各仅触发一次函数

问题原因 #

• 函数组件每次重渲染时，你定义在组件内部的typingTimer普通变量都会被重新初始化，无法保留上一次渲染的计时器ID，导致clearTimeout无法正确清除旧计时器
• 你在组件顶层直接绑定原生DOM事件，组件每次重渲染都会重复绑定同一个事件回调，触发一次输入会同时执行多个回调生成多个计时器，最终doneTyping会被多次调用
• 直接通过getElementById操作DOM不符合React的设计规范，容易出现元素未挂载就查询为空的问题

正确实现代码 #

import { useRef, useState, useEffect } from 'react';

export default function App() {
  // 用useRef存储计时器ID，跨渲染保持引用不变
  const typingTimerRef = useRef(null);
  // 用useRef存储是否已经触发过开始输入的回调
  const isTypingRef = useRef(false);
  const doneTypingInterval = 5000;
  // 存储输入框内容
  const [inputValue, setInputValue] = useState('');

  // 开始输入的回调，仅调用一次
  const handleStartTyping = () => {
    if (!isTypingRef.current) {
      console.log('start typing'); // 替换为你要调用的开始输入函数
      isTypingRef.current = true;
    }
  };

  // 停止输入的回调
  const doneTyping = () => {
    console.log('done'); // 替换为你要调用的停止输入函数
    isTypingRef.current = false;
  };

  // 输入框keyup事件回调，直接用React合成事件不用手动绑定原生事件
  const handleKeyUp = () => {
    // 每次输入先清除之前的计时器
    clearTimeout(typingTimerRef.current);
    // 触发开始输入回调
    handleStartTyping();
    // 只有输入框有内容时才设置停止计时器
    if (inputValue) {
      typingTimerRef.current = setTimeout(doneTyping, doneTypingInterval);
    } else {
      // 输入框清空时直接重置状态，不触发停止回调
      isTypingRef.current = false;
    }
  };

  // 组件卸载时清除残留计时器，避免内存泄漏
  useEffect(() => {
    return () => {
      clearTimeout(typingTimerRef.current);
    };
  }, []);

  return (
    <div className="App">
      <h1>Hello CodeSandbox</h1>
      <form>
        <input
          type="search"
          value={inputValue}
          onChange={(e) => setInputValue(e.target.value)}
          onKeyUp={handleKeyUp}
          placeholder="Start typing...."
        />
      </form>
    </div>
  );
}

改动说明 #

• 用useRef存储计时器ID和输入状态，跨渲染不会重置，可以正确清除旧计时器
• 直接使用React的合成事件onKeyUp，避免重复绑定原生事件的问题
• 新增isTypingRef状态标记，保证开始输入的回调只会在首次输入时触发一次
• 新增卸载生命周期清除计时器，避免内存泄漏
• 用受控组件的方式管理输入框内容，不需要再手动查询DOM获取输入值

内容的提问来源于stack exchange，提问作者Mudasir