TextInput组件简介

TextInput组件是一个允许用户在应用中通过键盘输入文本的基本组件。这个组件提供了很多功能，比如自动完成拼写，自动大小写，提供占位符，还支持弹出不同类型的键盘等功能。

我们可以通过创建一个简单TextInput组件看看其展示效果。在TextInput组件中，通过style属性可以设置组件的外观样式，例如：宽高、背景颜色、边框样式等。另外还可以监听TextInput组件与用户的交互行为。

<TextInput
  style={{height:40, borderColor: 'gray', borderWidth: 1}}
  onFocus={(text) => this.setState({text})}
  placeholder={'请输入你的名字'}
/>

TextInput组件常用属性

通过设置TextInput组件的属性，可以设置TextInput组件的样式以及功能特性。常用的TextInput组件的属性可以参考下表。

| 属性名称 | 类型 | 说明 |
| --- | --- | --- |
|editable |bool |如果为false，文本框是不可编辑的。默认值为true。|
|keyboardType |enum |决定弹出的何种软键盘的，譬如numeric（纯数字键盘）|
|placeholder |string |如果没有任何文字输入，会显示此占位文字。|
|value |string |文本框中的文字内容。|
|maxLength |number |限制文本框中最多的字符数。|

TextInput组件事件处理

TextInput组件中有几个比较重要的事件，这些事件与用户交互密切相关，当用户对TextInput组件进行不同的操作时，会调用不同的函数，我们可以根据程序功能需要在不同函数中定义不同的处理逻辑。

| 函数名称 | 类型 | 说明 |
| --- | --- | --- |
| onFocus|function |当文本框获得焦点的时候调用此回调函数。|
| onChangeText|function |当文本框内容变化时调用此回调函数。改变后的文字内容会作为参数传递。|
| onEndEditing|function |当文本输入结束后调用此回调函数。|
| onSubmitEditing|function |此回调函数当软键盘的确定/提交按钮被按下的时候调用此函数。如果multiline={true}，此属性不可用。|

下方的示例代码中，演示了各个函数的使用方法。

<TextInput
  ref='1'
  style={{height:40, borderColor: 'gray', borderWidth: 1}}
  onFocus={() => console.log('触发onFocus事件')}
  onChangeText={(text) => console.log('触发onChangeText事件：'+text)}
  onEndEditing={() => console.log('触发onEndEditing事件')}
  onSubmitEditing={() => console.log('触发onSubmitEditing事件')}
  placeholder={'请输入你的名字'}
/>

示例代码

在下方的示例代码中，创建了一个TextInput组件以及一个Button组件，当在TextInput组件中输入文字时，可以监听用户与TextInput组件的交互过程。当用户点击Button组件时，可以清空TextInput组件中的输入内容。

• 在终端中执行如下命令，创建TextInputDemo工程；

react-native init TextInputDemo

• 使用Atom打开TextInputDemo工程的index.ios.js文件，编写组件所使用的样式

const styles = StyleSheet.create({
  container: {
    flex: 1,
    flexDirection: 'column',
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F5FCFF',
  },
});

• 创建TextInput组件以及Button组件，并实现预期的功能。

export default class TextInputDemo extends Component {
  render() {
    return (
      <View style={styles.container}>
         <TextInput
        ref='1'
          style={{height:40, borderColor: 'gray', borderWidth: 1}}
          onFocus={() => console.log('触发onFocus事件')}
            onChangeText={(text) => console.log('触发onChangeText事件：'+text)}
            onEndEditing={() => console.log('触发onEndEditing事件')}
            onSubmitEditing={() => console.log('触发onSubmitEditing事件')}
         placeholder={'请输入你的名字'}
           />
       <Button
          onPress={(text) => this.refs['1'].clear()}
          title="点击按钮清除输入内容"
       />
      </View>
    );
  }
}

• 使用import加载项目所使用的模块，并且注册组件TextInputDemo成为整个应用的根容器。

import React, { Component } from 'react';
import {
  AppRegistry,
  StyleSheet,
  View,
  TextInput,
  Button,
} from 'react-native';

AppRegistry.registerComponent('TextInputDemo', () => TextInputDemo);

• 在终端中执行下面的命令运行程序，在iOS模拟器中可以看到创建的TextInput组件和Button组件。

react-native run-ios

• 打开iOS模拟器的日志，当用户在TextInput组件中输入内容时，可以通过日志查看器看到TextInput组件的事件处理函数被调用。

---