ホームページ > 記事 > ウェブフロントエンド > TextInput コンポーネントの詳細な紹介
TextInput コンポーネントの詳細な紹介
- 零下一度オリジナル
- 2017-06-28 10:21:282756ブラウズ
1. TextInput コンポーネントの概要
TextInput コンポーネントは、入力ボックスとしての基本的な入力機能の実装に加えて、自動検証、プレースホルダー、ポップアップするさまざまなキーボード タイプの指定など、他の多くの機能も提供します。
2、コンポーネントのプロパティ
(1) autoCapitalize: 最初の文字は自動的に大文字になります。オプションの値は、none、sentences、words、characters です。
(2)プレースホルダー: プレースホルダー、入力前に表示されるテキストコンテンツ。
(3)value: テキスト入力ボックスのデフォルト値。
(4)placeholderTextColor: プレースホルダー テキストの色。
(5)password: trueの場合、パスワード入力ボックスを意味します。テキストは「*」と表示されます
(6)multiline: trueの場合、複数行入力を意味します。
(7)編集可能: デフォルトはtrueです。 false に設定すると、編集できないことを意味します。
(8)autoFocus: trueの場合、フォーカスは自動的に取得されます。
(9)clearButtonMode: クリアボタンがいつ表示されるかを示します。オプションの値は次のとおりです: never、while-editing、unless-editing、always。
(10)maxLength: 入力できる最長の文字数。
(11)ReturnKeyAutomatically を有効にする: デフォルトは 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コンポーネントが入力テキストの長さをリアルタイムでカウントして表示します。
入力ボックスの右側にある「検索」ボタンをクリックして、入力ボックスの内容をポップアップ表示します。
|
1
2
3
5
6
7
8 9
10
11
12
13
14
15
16
17
18
19
20 21 2223242579
80
81
82
83
84
85
86
87
88
89
90 91
92
93
94
95
96
97
98
99
|
import React, { Component } from 'react'<code class="js plain">;import React, { Component } from 'react';
import { AppRegistry,
StyleSheet,
Text,
View,
TextInput,
} from 'react-native';
//输入框组件class Search extends Component { //构造函数
constructor(props) {
super(props);
this.state = {text: ''};
}
//组件渲染
render() {
return (
<View style={styles.flex}>
<View style={[styles.flexDirection, styles.inputHeight]}>
<View style={styles.flex}>
<TextInput
style={styles.input}import { AppRegistry,🎜 スタイルシート、🎜 テキスト、🎜 ビュー、 🎜 TextInput,🎜} from 'react-native';🎜<div class="linenumber9index8alt2"> 🎜<divclass><codeclass comments>//输入框组件🎜<div class="linenumber11index10alt2">
<code class="js plain">クラス検索はコンポーネントを拡張します {🎜 //构造関数🎜 constructor(props) {🎜 super(props);🎜 this.state = {text: ''}; 🎜 }🎜 🎜
//组件渲染🎜return (🎜 <View style={styles.flex}>🎜 <View style={[styles.flexDirection,styles.inputHeight]}>🎜 <View style={styles.flex}>🎜<TextInput🎜 style={styles.input}🎜 returnKeyType="search" placeholder="请输入关键字" onChangeText={(text) => this.setState({text})}/>
</View>
<View style={styles.btn}>
<Text style={styles.search} onPress={this.search.bind(this)}>搜索</Text>
</View>
</View>
<Text style={styles.tip}>已输入{this.state.text.length}个文字</Text>
</View>
);
}
//搜索按钮点击
search(){
alert("您输入的内容为："+this.state.text);
}
}//默认应用的容器组件class App extends Component { render() {
return (
<View style={[styles.flex, styles.topStatus]}>
<Search></Search>
</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'
},
search:{
color:'#fff',
fontSize:15,
fontWeight:'bold'
},
tip:{
marginLeft: 5,
marginTop: 5,
color: '#C0C0C0',
}
});AppRegistry.registerComponent('HelloWorld', () => App);
|
以上がTextInput コンポーネントの詳細な紹介の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。