React Native - 使用 ref 的 TextInput 值（不受控制的组件）

Question

我想知道是否可以使用其引用从 TextInput 获取值，如下所示：

emailRef = useRef<TextInput>();

return(
   <>
       <TextInput ref={emailRef}/>
       <TouchableOpacity 
           onPress={() => console.log(emailRef.current.value)}
       >
           Print Value of TextInput
       </TouchableOpacity>
   </>
)

我知道这在 React 上是可行的，但我不知道如何在 React Native 上做到这一点

obs：我不想使用 State 来做这个。

Answer 1

您可以直接在另一个元素中使用 emailRef.current._lastNativeText。

教你一个“小窍门”

根据我的经验，TextInput 中的 useRef 更多地用于更改 Input 上的当前值。

要访问该值，我通常会看到类似这样的内容：

将这些道具/功能添加到 TextInput

 <TextInput ref={emailRef}
    ....
    onChange={ handleInputChange }. 
    onEndEditing={ handleInputSubmit }
    ....
 />

然后您可以通过简单地获得输入

const handleInputChange = useCallback((ev) => {
        const inputValue = ev.nativeEvent.text
        // you can do what you want now
        ....
}

这可能看起来像是额外的工作，但这种方法的优点是它允许您检查输入错误（p.e。如果您不输入什么特殊字符）而不必每次输入 TextInput

时使用 setState 或 useEffect

React Native - 使用 ref 的 TextInput 值（不受控制的组件）

React Native - TextInput value using ref (Uncontrolled Component)

textinput

typescript

reactjs

react-native

react-ref