React Native中TextInput的onEndEditing何时触发？异常问题求助

一、onEndEditing 触发的场景 #

• 用户点击键盘上的提交按钮（如回车、完成，对应returnKeyType设置的按钮）
• TextInput失去焦点时，包括：
  • 点击页面空白区域或非可聚焦组件（如普通按钮）
  • 安卓按下返回键收起键盘后，TextInput失去焦点
  • 页面跳转、组件卸载前，TextInput失去焦点
  • 切换到其他应用后返回，TextInput已失去焦点

二、针对你遇到的问题的解决方案 #

1. 避免返回键收起键盘后跳转触发onEndEditing #

你可以通过区分触发来源来控制逻辑，用onSubmitEditing专门捕获回车提交，再配合状态变量过滤非预期的onEndEditing触发：

import { useState } from 'react';
import { TextInput } from 'react-native';

// ...

const [isSubmitByEnter, setIsSubmitByEnter] = useState(false);
const [textSearchData, settextSearchData] = useState('');

const handleBarCodeScanned = (data) => {
  // 你的业务逻辑
};

const handleSubmitEditing = () => {
  setIsSubmitByEnter(true);
  handleBarCodeScanned({ data: textSearchData });
};

const handleEndEditing = () => {
  if (isSubmitByEnter) {
    setIsSubmitByEnter(false);
    return;
  }
  // 非回车触发的失去焦点场景，可根据需求处理或忽略
};

// 渲染TextInput
<TextInput
  placeholderTextColor="white"
  onEndEditing={handleEndEditing}
  onSubmitEditing={handleSubmitEditing}
  onKeyPress={(e) => {
    console.log(e.nativeEvent.key);
    // 安卓回车键key为"\n"，可直接判断
    if (e.nativeEvent.key === '\n') {
      console.log('回车键被触发');
    }
  }}
  onChangeText={(text) => {
    settextSearchData(text.toUpperCase());
  }}
  returnKeyType="done" // 明确设置键盘提交按钮类型
/>

2. 解决onKeyPress无法捕获回车键的问题 #

安卓设备上，回车键在onKeyPress中的key值为"\n"，而非"Enter"，你可以直接判断该值来捕获回车事件。不过更推荐使用onSubmitEditing，这个API是专门为键盘提交按钮设计的，兼容性和可靠性更强。

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