进阶 reactnative.dev 2026-10-11 06:04:21 · 25 阅读
第46章 React Native 文本输入处理
0.77 版本 处理文本输入 TextInput 是一个核心组件,允许用户输入文本。它提供两个关键属性:onChangeText 会在文本内容发生变化时调用指定的回调函数;onSubmitEditing 则会在用户提交文本时触发回调。
举个实际场景:假设随着用户输入,你需要将他们键入的内容实时翻译成另一种语言。在这个新语言里,每个单词都拼写为 🍕。因此,"Hello there Bob" 会被翻译成"🍕 🍕 🍕"。
在上述示例中,我们将文本存储在 state 中,因为它是会随时间动态变化的数据。
文本输入还有更多可拓展的应用场景,比如你可以边输入边对内容进行校验。若想查看更详细的实现示例,请参考 React 官方文档中关于受控组件(controlled components)的介绍,或查阅 TextInput 的参考文档。
文本输入是用户与应用程序交互的方式之一。接下来,我们将探讨另一种输入类型,并学习如何响应触摸操作。