React Native TextInput中preventDefault失效，自定义退格键行为问题

React Native 里的 onKeyPress 事件传递的合成事件，其 preventDefault() 和 stopPropagation() 没法直接阻止 TextInput 的原生退格删除行为——因为这个事件是在原生操作执行完毕后才传到 JS 层的，拦截时机太晚。

要实现「按下退格不删除字符，反而选中文本」的需求，可以通过以下两种方式处理：

方式一：状态标记+控制value+直接操作选区 #

核心思路是标记退格操作，阻止内容被修改，同时强制设置文本选区：

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

export default function App() {
  const inputRef = useRef(null);
  const [mnemonicsValue, setMnemonicsValue] = useState('测试文本');
  const [isBackspacePressed, setIsBackspacePressed] = useState(false);

  const onKeyPress = (e) => {
    if (e.nativeEvent.key === 'Backspace') {
      setIsBackspacePressed(true);
      // 直接通过ref设置选区，立即选中全部文本
      inputRef.current?.setNativeProps({
        selection: { start: 0, end: mnemonicsValue.length }
      });
    } else {
      setIsBackspacePressed(false);
    }
  };

  const handleInputChange = (text) => {
    // 只有非退格触发的输入才更新内容
    if (!isBackspacePressed) {
      setMnemonicsValue(text);
    }
    setIsBackspacePressed(false);
  };

  return (
    <TextInput
      ref={inputRef}
      value={mnemonicsValue}
      multiline
      onKeyPress={onKeyPress}
      onChangeText={handleInputChange}
      style={styles.input}
      autoCapitalize="none"
      autoFocus={false}
      autoCorrect={false}
    />
  );
}

const styles = StyleSheet.create({
  input: {
    borderWidth: 1,
    borderColor: '#ccc',
    padding: 10,
    minHeight: 100,
    margin: 20
  }
});

方式二：通过onChange事件判断内容变化 #

利用 onChange 事件返回的原生事件对象，判断是否是退格导致的内容缩短，进而阻止修改并设置选区：

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

export default function App() {
  const inputRef = useRef(null);
  const [mnemonicsValue, setMnemonicsValue] = useState('测试文本');

  const onChange = (e) => {
    const newText = e.nativeEvent.text;
    // 新内容比原内容短，判定为删除操作（退格）
    if (newText.length < mnemonicsValue.length) {
      e.preventDefault();
      // 选中全部文本
      inputRef.current?.setNativeProps({
        selection: { start: 0, end: mnemonicsValue.length }
      });
    } else {
      setMnemonicsValue(newText);
    }
  };

  return (
    <TextInput
      ref={inputRef}
      value={mnemonicsValue}
      multiline
      onChange={onChange}
      style={styles.input}
      autoCapitalize="none"
      autoFocus={false}
      autoCorrect={false}
    />
  );
}

const styles = StyleSheet.create({
  input: {
    borderWidth: 1,
    borderColor: '#ccc',
    padding: 10,
    minHeight: 100,
    margin: 20
  }
});

注意事项 #

• multiline 属性开启后，TextInput 的部分行为会和单行模式有差异，测试时需注意不同场景下的表现。
• 如果是 iOS 平台，部分输入法的退格可能会有特殊处理，建议多测试几种输入法。

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