如何在非受控TextInput的onChange中阻止输入变更？preventDefault无作用

首先明确说：非受控TextInput没办法通过onChange事件里的preventDefault或stopPropagation直接阻止输入变更，这是由React Native的组件机制决定的。

为什么preventDefault/stopPropagation没用？ #

非受控组件的输入值是由原生TextInput控件自行管理的，React只是在原生控件更新值之后，触发onChange/onChangeText事件通知你值变化了。这时候原生的输入动作已经完成，调用preventDefault根本无法回退这个操作——就像你已经写完字了，再喊“别写”已经晚了。

可行的解决方案 #

如果需要阻止输入或限制输入内容，有两种常用的方式：

1. 用setNativeProps强制重置输入值

这种方法适合需要过滤输入内容（比如只允许数字、特定字符）的场景，直接操作原生组件的属性，绕过React的状态管理：

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

const RestrictedInput = () => {
  const inputRef = useRef(null);
  let lastValidValue = '';

  const handleChangeText = (newText) => {
    // 示例：只允许输入数字
    if (/^\d*$/.test(newText)) {
      lastValidValue = newText;
    } else {
      // 强制把输入框的值重置为上一次的有效内容
      inputRef.current?.setNativeProps({ text: lastValidValue });
    }
  };

  return (
    <TextInput
      ref={inputRef}
      onChangeText={handleChangeText}
      // 非受控模式，不设置value属性
      keyboardType="numeric"
    />
  );
};

2. 用editable属性控制输入权限

如果是需要完全禁止输入（比如某些条件下锁定输入框），直接用editable属性更简单：

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

const LockableInput = () => {
  const [isEditable, setIsEditable] = useState(true);

  // 示例：满足特定条件时锁定输入
  const toggleEditability = () => {
    setIsEditable(!isEditable);
  };

  return (
    <>
      <TextInput editable={isEditable} />
      <button onPress={toggleEditability}>
        {isEditable ? '锁定输入' : '解锁输入'}
      </button>
    </>
  );
};

这种方式是从原生层面禁用输入，比强制重置值更可靠，也更符合组件设计逻辑。

总结 #

非受控TextInput的onChange事件是“事后通知”，无法阻止原生输入动作；要实现阻止或限制输入，要么用setNativeProps强制修正值，要么用editable从根源控制输入权限。

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