《ReactNative系列講義》基礎篇---07.Handling TextInput

| 版權聲明：本文爲博主原創文章，未經博主允許不得轉載。

一、簡介

學完了數據控制，學完了設置樣式，也學完了事件的處理，今天我們來學習第一個交互性組件：TextInput。該組件的應用過程中會使用到上面所有學過的知識，因此該組件也算是一個綜合應用知識的案例。

二、基礎知識

• 基礎屬性：onChangeText 獲取用戶輸入的內容，方法類型的屬性（callback），用戶輸入的數據會以參數的形式返回給onChangeText屬性
• 基礎屬性：placeholder 用戶輸入信息前顯示，多用於提示
• 基礎屬性：multiline 設置多行輸入
• 基礎屬性：value 設置默認值

三、應用

import React, { Component } from 'react';
import { Text, TextInput, View } from 'react-native';

export default class PizzaTranslator extends Component {
  constructor(props) {
    super(props);
    // 因爲用戶輸入的內容是實時改變的，所以我們將內容保存在狀態中
    this.state = {text: ''};
  }

  render() {
    return (
      <View style={{padding: 10}}>
        <TextInput
          style={{height: 40}}
          // 輸入提示內容
          placeholder="請輸入數據"
          // text參數就是用戶輸入的數據
          onChangeText={(text) => this.setState({text})}
        />
        <Text style={{padding: 10, fontSize: 42}}>
           // 實時顯示用戶輸入的數據
          {this.state.text}
        </Text>
      </View>
    );
  }
}

四、總結

通過onChangeText和placeholder兩個屬性就可以製作一個簡單的交互組件。在開發中，android平臺TextInput組件自帶下劃線樣式，下劃線的樣式會根據手機系統版本來定義，不可修改。如果想去掉，可使用underlineColorAndroid屬性；如果想換上自己的下劃線，可在TextInput組件外層包裹一層View。
本文只描述了一下常用到的，也是最基本的屬性，還有很多能夠實現個性化的屬性，比如：設置彈出鍵盤的類型、自動轉換大寫、自動獲取光標、是否可編輯、輸入內容的最大長度等等，還有一些回調方法，處理各種事件。