如何在React Native中使用useRef获取TextInput的输入值？

React Native里的TextInput和Web端input实现逻辑不同，通过useRef拿到的组件实例并没有直接暴露value属性，所以原代码里inputRef.current.value会返回undefined，自然无法打印输入内容。下面提供几种可行的解决方式：

方法一：用TextInput的getText()方法异步获取 #

RN的TextInput实例自带getText()方法，可异步获取当前输入内容，修改代码如下：

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

export default function App() {
    const inputRef = useRef(null);
    
    const send = async () => {
        if (inputRef.current) {
            const value = await inputRef.current.getText();
            console.log(value);
        }
    };

    return(
        <View>
            <TextInput ref={inputRef} />
            <Button
                title="send"
                onPress={send}
            />
        </View>
    )
}

方法二：结合useState实时同步输入值（更常用） #

如果不需要依赖ref的直接操作，用onChangeText配合useState管理输入值是RN里更常规的开发模式，代码简洁且符合React状态管理逻辑：

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

export default function App() {
    const [inputValue, setInputValue] = useState("");
    
    const send = () => {
        console.log(inputValue);
    };

    return(
        <View>
            <TextInput 
                value={inputValue}
                onChangeText={setInputValue}
            />
            <Button
                title="send"
                onPress={send}
            />
        </View>
    )
}

方法三：手动用ref存储输入值 #

要是你坚持想用ref同步获取内容，也可以在onChangeText回调里把输入值手动存到ref的current属性中：

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

export default function App() {
    const inputRef = useRef("");
    
    const send = () => {
        console.log(inputRef.current);
    };

    return(
        <View>
            <TextInput 
                onChangeText={(text) => inputRef.current = text}
            />
            <Button
                title="send"
                onPress={send}
            />
        </View>
    )
}

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