React Native中使用useRef获取TextInput值为何返回NaN

你碰到的NaN报错本质是把Web端DOM input的取值逻辑直接搬到了React Native场景，两套API完全不兼容：React Native的TextInput组件实例上根本不存在可直接读取的value属性，refNum1.current.value取到的本身就是undefined，对undefined执行+做数字强转，结果必然是NaN，和用户实际输入的内容没有任何关联。

• 优先使用受控组件逻辑
  这是React Native 官方推荐的标准写法，完全不需要依赖ref取值：用useState维护两个TextInput的实时输入内容，通过TextInput的onChangeText回调把每次输入的文本同步到state中，点击按钮时直接从state读取值做数字转换即可。
  参考代码：

  import { useState } from 'react';
  import { TextInput, Button, View } from 'react-native';
  
  const CalcPage = () => {
    // 维护两个输入框的文本状态
    const [inputNum1, setInputNum1] = useState('');
    const [inputNum2, setInputNum2] = useState('');
  
    const handleCalculate = () => {
      // 对输入文本做合法性校验
      const num1 = Number(inputNum1);
      const num2 = Number(inputNum2);
      if (Number.isNaN(num1) || Number.isNaN(num2)) {
        console.log('请输入有效的数字内容');
        return;
      }
      // 后续计算逻辑
      console.log('两个数值分别为：', num1, num2);
    };
  
    return (
      <View style={{ padding: 20, gap: 12 }}>
        <TextInput
          value={inputNum1}
          onChangeText={setInputNum1}
          keyboardType="numeric"
          placeholder="请输入第一个数字"
        />
        <TextInput
          value={inputNum2}
          onChangeText={setInputNum2}
          keyboardType="numeric"
          placeholder="请输入第二个数字"
        />
        <Button title="开始计算" onPress={handleCalculate} />
      </View>
    );
  };
  

• 兼容ref的非受控写法
  如果确实需要通过ref读取输入值，不能直接访问.value属性，要调用TextInput实例内置的__getCurrentText()方法获取当前输入的文本，再做数字转换。注意这个方法是React Native内部实现的未公开接口，大版本升级时可能存在变动，稳定性没有保障，不推荐在生产环境大量使用。
  参考代码：

  import { useRef } from 'react';
  import { TextInput, Button, View } from 'react-native';
  
  const CalcPage = () => {
    const refNum1 = useRef(null);
    const refNum2 = useRef(null);
  
    const handleCalculateWithRef = () => {
      // 正确的ref取值方式，不要读.current.value
      const text1 = refNum1.current?.__getCurrentText() ?? '';
      const text2 = refNum2.current?.__getCurrentText() ?? '';
      const num1 = Number(text1);
      const num2 = Number(text2);
      console.log('两个数值分别为：', num1, num2);
    };
  
    return (
      <View style={{ padding: 20, gap: 12 }}>
        <TextInput ref={refNum1} keyboardType="numeric" placeholder="请输入第一个数字" />
        <TextInput ref={refNum2} keyboardType="numeric" placeholder="请输入第二个数字" />
        <Button title="开始计算" onPress={handleCalculateWithRef} />
      </View>
    );
  };
  

• 不要将Web端的DOM操作逻辑直接平移到React Native项目中，React Native没有浏览器DOM树结构，所有组件都是原生系统视图的封装，不存在DOM元素上的value、innerText这类原生属性。
• 数字强转前必须加合法性校验，对空值、非数字输入触发的NaN结果做异常分支处理，避免后续计算逻辑出现连锁报错。
• 数值类输入的TextInput建议配置keyboardType="numeric"属性，既可以引导移动端弹出数字键盘，也能减少用户输入非数字字符的概率。

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