コミュニティ 学ぶ ツールライブラリ レジャー
検索
日本語
ホームページ > ウェブフロントエンド > jsチュートリアル > TextInput コンポーネントの詳細な紹介

TextInput コンポーネントの詳細な紹介

零下一度
リリース： 2017-06-28 10:21:28
オリジナル
2811 人が閲覧しました

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コンポーネントが入力テキストの長さをリアルタイムでカウントして表示します。

  • 入力ボックスの右側にある「検索」ボタンをクリックして、入力ボックスの内容をポップアップ表示します。

原文:React Native - 文本输入框（TextInput）的使用详解 原文:React Native - 文本输入框（TextInput）的使用详解 原文:React Native - 文本输入框（TextInput）的使用详解

(2) サンプルコード
1
2
3
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
5 4
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
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: ''}; 🎜
}🎜
🎜
//组件渲染🎜
<codeclass plain>render() {🎜<div class="linenumber20index19alt1"> <code class="js space"> 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 サイトの他の関連記事を参照してください。

関連ラベル：
native react
ソース：php.cn
前の記事：ドキュメント オブジェクト モデルのコード例 次の記事：Javascriptの非コンストラクタ継承例の詳細説明
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
著者別の最新記事
最新の問題
コンソールに入力したテキストが表示されない そこで、React でフォームを構築するために formik を使用しています。いくつかの変更を加えた入力フィールドを含む TextInput コンポーネントを作成しました。 ch...
から 2024-04-04 20:30:28
0
1
404
関連トピック
詳細>
人気のおすすめ
人気のチュートリアル
詳細>
関連するチュートリアル
人気のおすすめ
最新のコース
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート