1 概述

TextInput组件和Text组件类似，内部都没有使用FlexBox布局，不同的是TextInput组件支持文字的输入，因为支持文字输入， TextInput组件要比Text组件多了一些属性和方法。TextInput组件支持Text组件所有的Style属性，而TextInput组件本身是没有特有的Style属性的。

2 属性

TextInput组件支持所有的View组件的属性，除此之外，它还有许多其他属性。

2.1 onChangeText

当输入框的内容发生变化时，就会调用onChangeText。

index.Android.js

import React, {Component} from 'react';
import {AppRegistry, StyleSheet, View, TextInput, Button,Alert} from 'react-native';
class TextApp extends Component {
  constructor(props) {
    super(props);
    this.state = {
      searchText: ""
    }
  }
  render() {
    return (
      <View style={styles.container}>
        <View style={styles.searchBar}>
          <TextInput style={styles.input} placeholder='请输入内容'
                onChangeText={(text) => {
                  this.setState({searchText: text});
                }}/>
          <Button style={styles.button} title='搜索'
              onPress={ () => {
                Alert.alert('输入的内容为:' + this.state.searchText);
              }
              }/>
        </View>
      </View>
    );
  }
}
const styles = StyleSheet.create({
  container: {
    flex: 1,
  },
  searchBar: {
    flexDirection: 'row',
    height: 45,
    justifyContent: 'center',
    alignItems: 'center'
  },
  input: {
    flex: 1,
    borderColor: 'gray'
  },
  button: {
    flex: 1
  }
});
AppRegistry.registerComponent('ViewSample', () => TextApp);

上面的例子我们用到了TextInput组件的onChangeText属性，当我们在TextInput中输入内容时，这个内容就会通过onChangeText的参数text传递回来，在onChangeText中将text的内容保存到state中。当我们点击Button时，通过Alert将state中保存的内容展现出来。

运行程序效果如下图所示。

在输入框中输入android，点击搜索Button，可以看到输入的Android展示到了Alert中。

2.2 onChange

当输入框的内容发生变化时，也会调用onChange，只不过它所返回的参数是一个event，我们来改写2.1的代码：

...
 <TextInput style={styles.input} placeholder='请输入内容' keyboardType='default'
                onChange={(event) => {
                  this.setState({searchText: event.nativeEvent.text});
                }}/>
...                
 

通过event.nativeEvent.text可以得到用户输入的内容，如果只是想要得到用户输入的内容，还是用onChangeText比较合适。

2.3 keyboardType

keyboardType用于设置弹出软键盘的类型。它的取值为范围为： enum(‘default', ‘email-address', ‘numeric', ‘phone-pad', ‘ascii-capable', ‘numbers-and-punctuation', ‘url', ‘number-pad', ‘name-phone-pad', ‘decimal-pad', ‘twitter', ‘web-search') ，其中default、numeric、email-address和phone-pad是跨平台。

...
 <TextInput style={styles.input} placeholder='请输入内容' keyboardType='phone-pad'
                onChangeText={(text) => {
                  this.setState({searchText: text}); 
                }}/>
...  

将keyboardType的值设置为phone-pad，效果如下图所示。

2.4 blurOnSubmit

如果blurOnSubmit值为true，文本框会在按下提交键时失去焦点。对于单行输入框，blurOnSubmit默认值为true，多行则为false。

在单行的情况下，点击键盘上的提交按钮时，TextInput的效果如下图所示。

将blurOnSubmit设置为false：

...
 <TextInput style={styles.input} placeholder='请输入内容' blurOnSubmit={false} 
                onChangeText={(text) => {
                  this.setState({searchText: text});
                }}/>
... 

点击键盘上的提交按钮时，TextInput的效果如下图所示。

2.5 onSubmitEditing

当提交键被按下时会调用onSubmitEditing，如果multiline等于true，则此属性不可用。

...
 <TextInput style={styles.input} placeholder='请输入内容' blurOnSubmit={true} multiline={false}
                onChangeText={(text) => {
                  this.setState({searchText: text});
                }}
                onSubmitEditing={(event) => {
                  console.log(event.nativeEvent.text);
                }}
          />
...         

运行程序并在App的开发菜单中选择Debug JS Remotely，这时我们输入Android并按下提交键，在Console控制台中就会输出结果。（笔者用的是WebStorm）

2.6 returnKeyType

用于设置软键盘回车键的样式，Android平台可以使用returnKeyLabel来设置软键盘回车键的内容。

returnKeyType的取值为enum(‘done', ‘Go', ‘next', ‘search', ‘send', ‘none', ‘previous', ‘default', ‘emergency-call', ‘google', ‘join', ‘route', ‘yahoo')。

其中跨平台的取值有：done、next、search、send。

Android平台独有：none、previous。

iOS平台独有：default、emergency-call、google、join、route、yahoo。

如果我们将returnKeyType设置为go时，效果如下图所示。

returnKeyType设置为send时，效果如下图所示。

2.7 其他跨平台属性

2.8 Android平台独有属性

2.9 iOS平台独有属性

3 方法

clear()

clear用于清空输入框的内容。

想要使用组件的方法则需要使用组件的引用，例子如下所示。

...
render() {
    return (
      <View style={styles.container}>
        <View style={styles.searchBar}>
          <TextInput style={styles.input} ref="textInputRefer" placeholder='请输入内容' blurOnSubmit={true}
                returnKeyType='send'
                onChangeText={(text) => {
                  this.setState({searchText: text});
                }}
          />
          <Button style={styles.button} title='清除'
              onPress={ () => {
                this.refs.textInputRefer.clear();
              }
              }/>
        </View>
      </View>
    );
  }
 ...  

在TextInput标签中定义引用的名称：ref="textInputRefer"，这样我们通过 this.refs.textInputRefer就可以得到TextInput 组件的引用。在Button的onPress函数中，调用了TextInput的clear方法，这样当我们点击“清除”按钮时，文本框中的内容就会被清除。

isFocused(): boolean

返回值表明当前输入框是否获得了焦点。

好了，到这里TextInput组件就介绍到这里，还有一些没有列出的属性请查看官方文档。希望对大家的学习有所帮助，也希望大家多多支持。

# React  # Native  # TextInput组件  # 可定制react18 input otp 一次性密码输入组件  # React获取input值并提交的2种方法实例  # react获取input输入框的值的方法示例  # 在react项目中使用antd的form组件  # 动态设置input框的值  # React-Native TextInput组件详解及实例代码  # react Input组件Compositionstart和Compositionend事  # 值为  # 所示  # 文本框  # 请输入  # 就会  # 如下图  # 输入框  # 按下  # 设置为  # 回调  # 回车键  # 的是  # 当我们  # 下划线  # 会在  # 前将  # 框中  # 形如  # 首字母  # 是一个 

相关栏目： 【 网站优化151355 】 【 网络推广146373 】 【 网络技术251813 】 【 AI营销90571 】

相关推荐： python中快速进行多个字符替换的方法小结  Google浏览器为什么这么卡 Google浏览器提速优化设置步骤【方法】  香港服务器如何优化才能显著提升网站加载速度？  🚀拖拽式CMS建站能否实现高效与个性化并存？  JS弹性运动实现方法分析  Linux系统命令中tree命令详解  Windows驱动无法加载错误解决方法_驱动签名验证失败处理步骤  Laravel如何清理系统缓存命令_Laravel清除路由配置及视图缓存的方法【总结】  JS碰撞运动实现方法详解  JavaScript如何操作视频_媒体API怎么控制播放  如何在橙子建站中快速调整背景颜色？  如何快速搭建支持数据库操作的智能建站平台？  php打包exe后无法访问网络共享_共享权限设置方法【教程】  Win11怎么恢复误删照片_Win11数据恢复工具使用【推荐】  魔方云NAT建站如何实现端口转发？  Laravel Eloquent模型如何创建_Laravel ORM基础之Model创建与使用教程  桂林网站制作公司有哪些,桂林马拉松怎么报名？  Laravel辅助函数有哪些_Laravel Helpers常用助手函数大全  HTML5空格在Angular项目里怎么处理_Angular中空格的渲染问题【详解】  Python企业级消息系统教程_KafkaRabbitMQ高并发应用  Laravel如何创建自定义中间件？（Middleware代码示例）  Laravel如何使用集合（Collections）进行数据处理_Laravel Collection常用方法与技巧  如何在万网自助建站中设置域名及备案？  东莞专业网站制作公司有哪些,东莞招聘网站哪个好？  如何做网站制作流程,*游戏网站怎么搭建？  香港服务器网站搭建教程-电商部署、配置优化与安全稳定指南  Swift中swift中的switch 语句  Laravel Livewire是什么_使用Laravel Livewire构建动态前端界面  Linux系统命令中screen命令详解  Laravel怎么实现模型属性转换Casting_Laravel自动将JSON字段转为数组【技巧】  制作电商网页,电商供应链怎么做？  如何在局域网内绑定自建网站域名？  国美网站制作流程,国美电器蒸汽鍋怎么用官方网站？  如何在万网自助建站平台快速创建网站？  如何用y主机助手快速搭建网站？  JavaScript中的标签模板是什么_它如何扩展字符串功能  Laravel如何优雅地处理服务层_在Laravel中使用Service层和Repository层  如何在阿里云服务器自主搭建网站？  Laravel如何创建自定义Facades？（详细步骤）  Laravel如何实现模型的全局作用域？（Global Scope示例）  简单实现Android文件上传  javascript基本数据类型及类型检测常用方法小结  如何快速生成凡客建站的专业级图册？  Laravel如何获取当前用户信息_Laravel Auth门面获取用户ID  海南网站制作公司有哪些,海口网是哪家的？  php静态变量怎么调试_php静态变量作用域调试技巧【解答】  如何在Windows服务器上快速搭建网站？  如何快速搭建高效WAP手机网站？  Laravel如何实现本地化和多语言支持_Laravel多语言配置与翻译文件管理  黑客入侵网站服务器的常见手法有哪些？