React Native中TextInput用useRef报错：inputCard.current.value未定义

错误信息 #

ERROR  TypeError: TaskQueue: Error with task : undefined is not an object (evaluating 'inputCard.current.value.replace')

问题根源 #

1. React Native TextInput的ref访问逻辑错误：React Native的TextInput是原生组件，通过useRef获取的实例并非Web端的DOM元素，不存在.value属性。你直接用inputCard.current.value取值的写法只适用于Web环境的输入框。
2. 组件初始化时的非法调用：组件挂载后useEffect立即执行handleChange，此时inputCard.current可能还未完成初始化，即便初始化完成，也无法获取到不存在的.value属性，直接调用replace就会抛出undefined错误。

为何Expo Snack能正常运行 #

Expo Snack默认以Web模式预览项目，此时React Native的TextInput会被转译为Web端的<input> DOM元素，这类元素支持通过ref.current.value直接访问输入值，因此代码能正常执行。但本地React Native项目运行在iOS/Android原生环境，不存在Web DOM的相关属性，所以报错。

修复方案 #

改用React受控组件模式，通过state管理输入框的值，而非直接操作ref：

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

const PhoneSetting = () => {
  const [inputValue, setInputValue] = useState('');
  const [card, setCard] = useState('');

  const handleChange = (text) => {
    // 过滤非数字字符
    const cleanText = text.replace(/\D/g, '');
    // 格式化号码
    const formattedText = cleanText
      .replace(/(\d{0,3})(\d{0,3})(\d{0,4})(\d{0,4})/, (_, g1, g2, g3, g4) => {
        let result = g1;
        if (g2) result += `-${g2}`;
        if (g3) result += `-${g3}`;
        if (g4) result += `-${g4}`;
        return result;
      });
    // 更新输入框显示值
    setInputValue(formattedText);
    // 更新带国家码的完整号码
    setCard(`+91${cleanText}`);
  };

  return (
    <>
      <TextInput
        value={inputValue}
        onChangeText={handleChange}
        placeholder="Enter number"
        keyboardType="phone-pad"
      />
      <TextInput value={card} editable={false} />
    </>
  );
};

export default PhoneSetting;

修复要点 #

• 使用onChangeText获取输入内容，替代原有的onChange+ref方式，这是React Native推荐的输入处理逻辑。
• 用inputValue state控制输入框显示值，完全遵循受控组件逻辑，避免直接操作DOM/ref。
• 移除原有的useEffect调用，避免组件初始化时的无效执行。
• 添加keyboardType="phone-pad"优化移动端输入体验，设置第二个输入框为不可编辑避免误操作。

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