TextInput組件怎么在React Native中使用

TextInput組件怎么在React Native中使用？相信很多沒有經驗的人對此束手無策，為此本文總結了問題出現的原因和解決方法，通過這篇文章希望你能解決這個問題。

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中使用的方法了嗎？如果還想學到更多技能或想了解更多相關內容，歡迎關注億速云行業資訊頻道，感謝各位的閱讀！