React Native中useRef获取TextInput值异常：原React代码适配问题

问题根源 #

Web 端的 <input> 元素可以通过 ref.current.value 直接读取输入值，但 React Native 的 TextInput 组件并没有暴露 value 属性供 ref 直接访问，所以直接调用 name.current.value 会返回 undefined。

可行解决方案 #

方法1：调用 TextInput 实例的 getValue() 方法 #

React Native 的 TextInput 实例提供了 getValue() 内置方法来获取当前输入值，修改代码如下：

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

const YourComponent = () => {
  const nameRef = useRef(null);

  const handleSubmit = () => {
    // 可选链避免空引用报错
    const inputValue = nameRef.current?.getValue();
    alert(inputValue);
    // 此处执行 Firestore API 调用逻辑
  };

  return (
    <>
      <TextInput ref={nameRef} placeholder="输入名称" />
      <Button title="提交" onPress={handleSubmit} />
    </>
  );
};

export default YourComponent;

方法2：使用受控组件（推荐方案） #

相比直接操作 ref，受控组件更符合 React 数据流设计理念，能避免 ref 相关的不确定性问题，代码示例：

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

const YourComponent = () => {
  const [name, setName] = useState('');

  const handleSubmit = () => {
    alert(name);
    // 此处执行 Firestore API 调用逻辑
  };

  return (
    <>
      <TextInput 
        value={name}
        onChangeText={setName}
        placeholder="输入名称" 
      />
      <Button title="提交" onPress={handleSubmit} />
    </>
  );
};

export default YourComponent;

Web 端与 React Native 代码差异对比 #

• Web 端可直接通过 ref 取 value 的示例：

import { useRef } from 'react';

const WebComponent = () => {
  const nameRef = useRef(null);

  const handleSubmit = () => {
    const inputValue = nameRef.current.value;
    alert(inputValue);
    // Firestore API 调用逻辑
  };

  return (
    <>
      <input ref={nameRef} placeholder="输入名称" />
      <button onClick={handleSubmit}>提交</button>
    </>
  );
};

• React Native 端无法复用上述逻辑，必须使用前面提到的两种方法替代。

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