React Native TextInput监听停止输入 onEndEditing失效解决方案

onEndEditing的触发条件是输入框失焦、键盘完全收起，和需要监听的「用户暂停打字但输入框仍保持聚焦」场景完全不匹配，因此无法实现停止输入的状态判定，哪怕TextInput已有预填充内容也不会改变这个回调的触发逻辑。

核心用防抖机制搭配onChangeText回调实现，不需要依赖任何失焦类事件，对预填充内容的TextInput同样生效：

• 维护两个状态：绑定输入框内容的文本状态、标记输入状态的布尔值
• 用ref存储定时器ID，避免组件重渲染时定时器引用丢失
• 每次输入内容变化时，先清空之前的倒计时定时器，标记为正在输入状态，再启动新的定时器
• 定时器等待时长建议设为300ms~800ms（聊天场景常用500ms，体验最自然），等待期间如果没有新的输入触发，定时器执行时就判定为用户停止输入
• 组件卸载、输入框失焦、输入内容被清空时，及时清除定时器、重置输入状态，避免内存泄漏和状态误判

代码示例 #

import { useState, useRef, useEffect } from 'react';
import { TextInput, View } from 'react-native';

const ChatInput = () => {
  // 支持初始预填充内容
  const [inputText, setInputText] = useState('预填充的输入内容');
  const [isTyping, setIsTyping] = useState(false);
  const typingTimer = useRef(null);
  // 停止输入判定等待时长，可根据业务需求调整
  const STOP_TYPING_DELAY = 500;

  const handleTextChange = (text) => {
    setInputText(text);
    // 清除上一轮的停止输入定时器
    if (typingTimer.current) clearTimeout(typingTimer.current);
    // 输入内容为空时直接判定为停止输入，不需要等定时器
    if (!text.trim()) {
      setIsTyping(false);
      return;
    }
    // 标记为正在输入状态
    setIsTyping(true);
    // 启动新的倒计时，时间到无新输入则判定为停止输入
    typingTimer.current = setTimeout(() => {
      setIsTyping(false);
      // 此处写停止输入后的业务逻辑，比如给服务端同步状态、关闭"对方正在输入"提示
    }, STOP_TYPING_DELAY);
  };

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

  return (
    <View>
      <TextInput
        value={inputText}
        onChangeText={handleTextChange}
        // 输入框失焦时直接重置输入状态
        onBlur={() => {
          if (typingTimer.current) clearTimeout(typingTimer.current);
          setIsTyping(false);
        }}
      />
    </View>
  );
};

export default ChatInput;

• 等待时长不要低于200ms，否则会频繁切换输入状态，导致输入提示反复闪跳；也不要超过1s，否则停止输入的提示更新滞后，体验较差
• 多端同步输入状态时，只需要在「进入正在输入状态」和「触发停止输入」两个节点向服务端发消息即可，不需要每次按键都发请求，减少不必要的性能消耗
• 如果输入框有初始填充值，用户第一次修改内容时就会正常走防抖逻辑，不需要额外做初始值兼容处理

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