1 概述

TextInput組件和Text組件類似，內(nèi)部都沒(méi)有使用FlexBox布局，不同的是TextInput組件支持文字的輸入，因?yàn)橹С治淖州斎耄?TextInput組件要比Text組件多了一些屬性和方法。TextInput組件支持Text組件所有的Style屬性，而TextInput組件本身是沒(méi)有特有的Style屬性的。

2 屬性

TextInput組件支持所有的View組件的屬性，除此之外，它還有許多其他屬性。

2.1 onChangeText

當(dāng)輸入框的內(nèi)容發(fā)生變化時(shí)，就會(huì)調(diào)用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='請(qǐng)輸入內(nèi)容'
                onChangeText={(text) => {
                  this.setState({searchText: text});
                }}/>
          <Button style={styles.button} title='搜索'
              onPress={ () => {
                Alert.alert('輸入的內(nèi)容為:' + 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屬性，當(dāng)我們?cè)赥extInput中輸入內(nèi)容時(shí)，這個(gè)內(nèi)容就會(huì)通過(guò)onChangeText的參數(shù)text傳遞回來(lái)，在onChangeText中將text的內(nèi)容保存到state中。當(dāng)我們點(diǎn)擊Button時(shí)，通過(guò)Alert將state中保存的內(nèi)容展現(xiàn)出來(lái)。

運(yùn)行程序效果如下圖所示。

在輸入框中輸入android，點(diǎn)擊搜索Button，可以看到輸入的Android展示到了Alert中。

2.2 onChange

當(dāng)輸入框的內(nèi)容發(fā)生變化時(shí)，也會(huì)調(diào)用onChange，只不過(guò)它所返回的參數(shù)是一個(gè)event，我們來(lái)改寫(xiě)2.1的代碼：

...
 <TextInput style={styles.input} placeholder='請(qǐng)輸入內(nèi)容' keyboardType='default'
                onChange={(event) => {
                  this.setState({searchText: event.nativeEvent.text});
                }}/>
...                
 

通過(guò)event.nativeEvent.text可以得到用戶輸入的內(nèi)容，如果只是想要得到用戶輸入的內(nèi)容，還是用onChangeText比較合適。

2.3 keyboardType

keyboardType用于設(shè)置彈出軟鍵盤(pán)的類型。它的取值為范圍為： enum(‘default', ‘email-address', ‘numeric', ‘phone-pad', ‘a(chǎn)scii-capable', ‘numbers-and-punctuation', ‘url', ‘number-pad', ‘name-phone-pad', ‘decimal-pad', ‘twitter', ‘web-search') ，其中default、numeric、email-address和phone-pad是跨平臺(tái)。

...
 <TextInput style={styles.input} placeholder='請(qǐng)輸入內(nèi)容' keyboardType='phone-pad'
                onChangeText={(text) => {
                  this.setState({searchText: text}); 
                }}/>
...  

將keyboardType的值設(shè)置為phone-pad，效果如下圖所示。

2.4 blurOnSubmit

如果blurOnSubmit值為true，文本框會(huì)在按下提交鍵時(shí)失去焦點(diǎn)。對(duì)于單行輸入框，blurOnSubmit默認(rèn)值為true，多行則為false。

在單行的情況下，點(diǎn)擊鍵盤(pán)上的提交按鈕時(shí)，TextInput的效果如下圖所示。

將blurOnSubmit設(shè)置為false：

...
 <TextInput style={styles.input} placeholder='請(qǐng)輸入內(nèi)容' blurOnSubmit={false} 
                onChangeText={(text) => {
                  this.setState({searchText: text});
                }}/>
... 

點(diǎn)擊鍵盤(pán)上的提交按鈕時(shí)，TextInput的效果如下圖所示。

2.5 onSubmitEditing

當(dāng)提交鍵被按下時(shí)會(huì)調(diào)用onSubmitEditing，如果multiline等于true，則此屬性不可用。

...
 <TextInput style={styles.input} placeholder='請(qǐng)輸入內(nèi)容' blurOnSubmit={true} multiline={false}
                onChangeText={(text) => {
                  this.setState({searchText: text});
                }}
                onSubmitEditing={(event) => {
                  console.log(event.nativeEvent.text);
                }}
          />
...         

運(yùn)行程序并在App的開(kāi)發(fā)菜單中選擇Debug JS Remotely，這時(shí)我們輸入Android并按下提交鍵，在Console控制臺(tái)中就會(huì)輸出結(jié)果。（筆者用的是WebStorm）

2.6 returnKeyType

用于設(shè)置軟鍵盤(pán)回車鍵的樣式，Android平臺(tái)可以使用returnKeyLabel來(lái)設(shè)置軟鍵盤(pán)回車鍵的內(nèi)容。

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

其中跨平臺(tái)的取值有：done、next、search、send。

Android平臺(tái)獨(dú)有：none、previous。

iOS平臺(tái)獨(dú)有：default、emergency-call、google、join、route、yahoo。

如果我們將returnKeyType設(shè)置為go時(shí)，效果如下圖所示。

returnKeyType設(shè)置為send時(shí)，效果如下圖所示。

2.7 其他跨平臺(tái)屬性

2.8 Android平臺(tái)獨(dú)有屬性

2.9 iOS平臺(tái)獨(dú)有屬性

3 方法

clear()

clear用于清空輸入框的內(nèi)容。

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

...
render() {
    return (
      <View style={styles.container}>
        <View style={styles.searchBar}>
          <TextInput style={styles.input} ref="textInputRefer" placeholder='請(qǐng)輸入內(nèi)容' blurOnSubmit={true}
                returnKeyType='send'
                onChangeText={(text) => {
                  this.setState({searchText: text});
                }}
          />
          <Button style={styles.button} title='清除'
              onPress={ () => {
                this.refs.textInputRefer.clear();
              }
              }/>
        </View>
      </View>
    );
  }
 ...  

在TextInput標(biāo)簽中定義引用的名稱：ref="textInputRefer"，這樣我們通過(guò) this.refs.textInputRefer就可以得到TextInput 組件的引用。在Button的onPress函數(shù)中，調(diào)用了TextInput的clear方法，這樣當(dāng)我們點(diǎn)擊“清除”按鈕時(shí)，文本框中的內(nèi)容就會(huì)被清除。

isFocused(): boolean

返回值表明當(dāng)前輸入框是否獲得了焦點(diǎn)。

好了，到這里TextInput組件就介紹到這里，還有一些沒(méi)有列出的屬性請(qǐng)查看官方文檔。希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

最新評(píng)論