React Native中TextInput的onBlur事件不生效问题求助

在你的代码中，点击TouchableOpacity时仅触发了它的onPress事件，但未让TextInput失去焦点，因此onBlur和onEndEditing都不会被触发。可以通过以下两种方式解决：

方法一：手动在TouchableOpacity点击时让TextInput失焦 #

通过useRef获取TextInput的引用，在TouchableOpacity的点击回调中调用blur()方法强制输入框失焦：

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

const App = () => {
  const inputRef = useRef(null);

  return (
    <View style={{ borderWidth: 1, height: 1000, backgroundColor: 'gray' }}>
      <TextInput
        ref={inputRef}
        onBlur={() => console.log('blur1')}
        onEndEditing={() => console.log('blur2')}
        onFocus={() => console.log('focus')}
        style={{ marginTop: 40, borderWidth: 1 }}
      />
      <TouchableOpacity 
        style={{ height: 600 }} 
        onPress={() => {
          console.log('press');
          inputRef.current?.blur();
        }} 
      />
    </View>
  );
};

export default App;

方法二：用TouchableWithoutFeedback包裹外层区域，点击空白处失焦 #

这种方式更通用，点击页面任何空白区域都能让TextInput失焦，适合搜索页这类需要点击空白关闭输入状态的场景：

import { View, TextInput, TouchableOpacity, TouchableWithoutFeedback, Keyboard } from 'react-native';
import { useRef } from 'react';

const App = () => {
  const inputRef = useRef(null);

  const handleOutsidePress = () => {
    Keyboard.dismiss();
    inputRef.current?.blur();
  };

  return (
    <TouchableWithoutFeedback onPress={handleOutsidePress}>
      <View style={{ borderWidth: 1, height: 1000, backgroundColor: 'gray' }}>
        <TextInput
          ref={inputRef}
          onBlur={() => console.log('blur1')}
          onEndEditing={() => console.log('blur2')}
          onFocus={() => console.log('focus')}
          style={{ marginTop: 40, borderWidth: 1 }}
        />
        <TouchableOpacity 
          style={{ height: 600 }} 
          onPress={() => {
            console.log('press');
            handleOutsidePress();
          }} 
        />
      </View>
    </TouchableWithoutFeedback>
  );
};

export default App;

原理说明 #

• React Native中，TouchableOpacity的onPress不会自动让其他组件失焦，必须手动触发输入框的blur()方法。
• 使用Keyboard.dismiss()可以同时收起键盘，配合blur()能完整触发onBlur和onEndEditing事件。

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