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

Posted 2023-04-18

【中文标题】React Native - 使用 ref 的 TextInput 值（不受控制的组件）

【英文标题】：React Native - TextInput value using ref (Uncontrolled Component)

【发布时间】：2021-09-20 14:43:45

【问题描述】：

我想知道是否可以使用它的 ref 从 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 来做这件事。

【问题讨论】：

你试过了吗？

【参考方案1】：

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

---

我要教你一个“小技巧”。

根据我的经验，TextInputs 中的 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
        ....

这似乎是额外的工作，但这种方法的优点是它允许您检查输入错误（如果您没有输入中的特殊字符，则为 pe），而无需使用 setState 或 @987654327 @每次输入TextInput

【讨论】：

这很有用，我现在将使用onEndEditing！但我真的很想知道我是否可以使用 ref 来获取 .text，因此我不会将您的答案标记为该问题的正确答案。

你可以使用你的答案。改成console.log(emailRef.current._lastNativeText)

我在尝试 console.log(emailRef.current._lastNativeText) 时未定义

尝试将emailRef 启动器更改为const emailRef = useRef(null)。我使用 RN 0.61.5 测试了一个项目

很遗憾，这对我不起作用，我会放弃它并使用 useState ：/ 感谢您的帮助