TextInput元件的詳細介紹

1，TextInput元件介紹

TextInput 元件除了作為輸入框實現基本的輸入功能外，它還提供了許多其他功能，例如自動校驗、佔位符以及指定彈出不同的鍵盤類型等。

2，元件的屬性

（1）autoCapitalize：首字母自動大寫。可選值有：none、sentences、words、characters。

（2）placeholder：佔位符，輸入前顯示的文字內容。

（3）value：文字輸入框的預設值。

（4）placeholderTextColor：佔位符文字的顏色。

（5）password：如果為 true，表示密碼輸入框。文字顯示為「*」

（6）multiline：如果為 true，表示多行輸入。

（7）editable：預設為 true。如果設定為 false 表示不可編輯。

（8）autoFocus：如果為 true，則自動取得焦點。

（9）clearButtonMode：表示何時會顯示清除按鈕。可選值有：never、while-editing、unless-editing、always。

（10）maxLength：能夠輸入的最長字元數。

（11）enablesReturnKeyAutomatically：預設為 false。設定為 true 表示沒有輸入文字時返回鍵無法使用。

（12）returnKeyType：表示軟鍵盤回傳鍵顯示的字串。可選值為：default、go、google、join、next、route、search、send、yahoo、 done、emergency-call。

#（13）secureTextEntry：預設為false。如果為 true，則像密碼框一樣隱藏輸入內容。

3，元件的方法

（1）onChange：當文字改變時，呼叫函數。

（2）onEndEditing：結束編輯時，呼叫函數。

（3）onBlur：失去焦點時觸發。

（4）onFocus：獲得焦點時觸發。

（5）onSubmitEditing：當結束編輯後，點擊鍵盤的提交按鈕觸發該事件。

4，使用範例

（1）效果圖

#

• 頁面上新增一個 TextInput 用於輸入文字，並設定相關的佔位符文字以及樣式。

• 當輸入框文字改變時，下方 Text 元件會即時統計並顯示輸入的文字長度。

• 點擊輸入框右側「搜尋」按鈕，則將輸入框內容彈出顯示。

         

##（2）範例程式碼

#import React, { Component } from 'react';
import {
  AppRegistry，
  」樣式表，





文本，


##} 來自'react-native'
;#  / /輸入框元件
class Search extends Component {  ##//建構子
建構子（道具）{



##（道具）;
this#.state = {text: ''
};
}
#  //元件渲染
#  render() {
                returnKeyType=##"search"## 請輸入關鍵字"
                onChangeText={(text) => #this
            </View> style={styles.btn}>
              this .search.bind(this)}>搜尋            <! ;/View>          </View>   {styles.tip}>已輸入{this .state.text.length}個文字       </View>    );   }     //搜尋按鈕點選   #search(){     alert("您輸入的內容為：" +this.state.text);   #}} #} # #  //預設應用的容器元件 #class App extends Component {    render() {       return (         #                          </View>       因 ###########################################################################################################################################################################################################    }  }   //样式定义 const styles = StyleSheet.create({   flex:{     flex: 1,   },   flexDirection:{     flexDirection:'row'   },   topStatus:{     marginTop:25,   },   inputHeight:{     height:45,   },   input:{     height:45,     borderWidth:1,     marginLeft: 5,     paddingLeft:5,     borderColor: '#ccc',     borderRadius: 4   },   btn:{     width:55,     marginLeft:-5,     marginRight:5,     backgroundColor:'#23BEFF',     height:45,     justifyContent:'center',     alignItems: 'center'    }, 搜尋:{     顏色：##'#fff' #    #fontSize :15,     #fontWeight:'粗體'    # },   提示：{     左邊界：5，     頁邊距上方：5，      顏色：'# C0C0C0' ,   } }); ##  AppRegistry.registerComponent('HelloWorld', () => App);
this .search.bind(this
)}>搜尋            <! ;/View>          </View>
  {styles.tip}>已輸入{this
.state.text.length}個文字
</View>    );
  }
  //搜尋按鈕點選
  #search(){

    alert("您輸入的內容為："
+this.state.text);
  #}}
#}
//預設應用的容器元件

#class App extends Component {
   render() {
      return
(


      因

   }
 }

//样式定义
const styles = StyleSheet.create({
  flex:{
    flex: 1,
  },
  flexDirection:{
    flexDirection:'row'
  },
  topStatus:{
    marginTop:25,
  },
  inputHeight:{
    height:45,
  },
  input:{
    height:45,
    borderWidth:1,
    marginLeft: 5,
    paddingLeft:5,
    borderColor: '#ccc',
    borderRadius: 4
  },
  btn:{
    width:55,
    marginLeft:-5,
    marginRight:5,
    backgroundColor:'#23BEFF',
    height:45,
    justifyContent:'center',
    alignItems: 'center'
  },
搜尋:{
    顏色：##'#fff'
#    #fontSize :15,
    #fontWeight:'粗體'
  # },
  提示：{
    左邊界：5，
    頁邊距上方：5，
    顏色：'# C0C0C0' ,
  }
});

AppRegistry.registerComponent('HelloWorld', () => App);

#

以上是TextInput元件的詳細介紹的詳細內容。更多資訊請關注PHP中文網其他相關文章！