欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

TextInput组件(绑定事件)

程序员文章站 2022-03-11 11:05:43
...

搜索框

在输入框中输入,点击搜索获取搜索款的 value

TextInput组件(绑定事件)


代码实现

//TextInput组件(绑定事件)

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

/*
     TextInput 是一个允许用户在应用中通过键盘输入文本的基本组件.
     本组件的属性提供了多种特性的配置,譬如自动完成,自动大小写,占位文字,以及多种不同的键盘类型(如纯数字键盘)等等
     常用:
     placeholder 占位符
     value   输入框的值
     password     是否密文输入
     editable     输入框是否可编辑
     returnKeyType    键盘return键的类型
     onChange     当文本变化时调用
     onEndEditing     当结束编辑时调用
     onSubmitEditing      当结束编辑,点击提交按钮时调用
     ......
 */

// 组件
var HelloReactNative = React.createClass({
    getInitialState: function () {
        return {
            inputText: " "
        };
    },
    //输入框的 onChange 实现
    getContent: function (text) {
        this.setState({
            inputText: text
        });
    },
    clickBtn: function () {
        alert(this.state.inputText);
    },


    render: function () {
        return (
            <View style={styles.container}>
                <View style={styles.flex}>
                    <TextInput
                        style={styles.input}
                        returnKeyType="search"
                        placeholder="请输入内容"
                        onChangeText={this.getContent}
                        enablesReturnKeyAutomatically="ture"
                        onSubmitEditing={this.clickBtn}
                    >
                    </TextInput>
                </View>
                <TouchableOpacity style={styles.btn} onPress={this.clickBtn}>
                    <Text style={styles.search}>搜索</Text>
                </TouchableOpacity>
            </View>
        );
    }
});

//样式
var styles = StyleSheet.create({
    container: {
        flexDirection: "row",
        height: 45,
        marginTop: 25
    },
    flex: {
        flex: 1
    },
    input: {
        height: 45,
        borderWidth: 1,
        marginLeft: 5,
        paddingLeft: 5,
        borderColor: "#CCC",
        borderRadius: 4
    },
    btn: {
        width: 55,
        marginLeft: 5,
        marginRight: 5,
        backgroundColor: "#2873ff",
        height: 45,
        justifyContent: "center",
        alignItems: "center"
    },
    search: {
        color: "#FFF",
        fontSize: 15,
        fontWeight: "bold"
    }
});


AppRegistry.registerComponent('HelloReactNative', () => HelloReactNative);


属性方法

属性

名称 作用 平台
View支持的相关属性 一些基本属性 官网链接 iOS、Android
autoCapitalize 自动切换成大写 enum(‘none’,’sentences’,’words’,’characters’) none:不自动切换任何字符成大写;sentences:默认每个句子的首字母变成大写;words:每个字母的首字母变成大写;characters:每个字母全部变成大写 iOS、Android
autoCorrent 设置拼写自动修正功能,默认为开启(true) bool iOS、Android
autoFocus 设置是否默认获取到焦点,默认为关闭(false),componentDidMount方法被调用之后才会获取焦点(componentDidMount是React组件被渲染之后React系统回调的方法) bool iOS、Android
defaultValue 给文本输入设置一个默认初始值 string< iOS、Android
editable 设置文本框是否可以编辑 bool iOS、Android
keyboardType 键盘类型:用来选择默认弹出键盘的类型,例如指定numeric就是弹出数字键盘。 ‘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 iOS、Android
maxLength 限制文本输入框最大的输入字符长度 number iOS、Android
multiline 设置可以输入多行文字,默认为false(表示无论文本输入多少,都是单行显示) bool iOS、Android
onBlur 监听方法,文本框失去焦点回调方法 function iOS、Android
onChange 监听方法,文本框内容发生改变回调方法 function iOS、Android
onChangeText 监听方法,文本框内容发生改变回调方法,该方法会进行传递文本内容 function iOS、Android
onEndEditing 监听方法,当文本结束文本输入回调方法 function iOS、Android\
onFocus 监听方法 文本框获取到焦点回调方法 function iOS、Android
onLayout 监听方法 组价布局发生变化的时候调用,调用方法参数为 {nativeFunction:{x,y,width,height}} function iOS、Android
onSelectionChange 监听方法 当Text input选中状态被改变时调用 function iOS、Android
onSubmitEditing 监听方法,当编辑提交的时候回调方法。不过如果multiline={true}的时候,该属性就不生效 function iOS、Android
placeholder 当文本输入框还没有任何输入的时候,默认显示信息,当有输入的时候该值会被清除 string iOS、Android
placeholderTextColor 设置placeholderText颜色 string iOS、Android
returnKeyType 决定return键怎么显示 enum(‘done’, ‘go’, ‘next’, ‘search’, ‘send’, ‘none’, ‘previous’, ‘default’, ‘emergency-call’, ‘google’, ‘join’, ‘route’, ‘yahoo’)。双平台适用:done、go、next、search、send;Android:none、previous;iOS:default、emergency-call、google、join、route、yahoo iOS、Android
secureTextEntry 设置是否为密码安全输入框 bool,默认为false iOS、Android
selectTextOnFocus 如果为true,当获得焦点,自动选中所有文本 bool iOS、Android
selectionColor 输入框文本的高亮颜色(iOS中包括光标) string iOS、Android
style 风格属性,可以参考Text组件风格 iOS、Android
value string iOS、Android
numberOfLines 设置TextInput的行数,multiline设置为true,并结合该属性能够满足多行的TextInput number Android
returnKeyLabel 设置return键为文本组件,利用它替换returnKeyType string android
underlineColorAndroid 设置TextInput的下划线颜色 string android
clearButtonMode 清除按钮模式,设置何时应该在TextInput右边出现清除按钮 enum(‘never’, ‘while-editing’, ‘unless-editing’, ‘always’) iOS
clearTextOnFocus 如果为true,当编辑开始自动清除TextInput文本内容 bool iOS
enablesReturnKeyAutomatically 如果为true,当没有输入文本键盘的return键自动失效,当输入文本键盘的return键自动生效,默认值是false bool iOS
keyboardAppearance 设置键盘的颜色 enum(‘default’, ‘light’, ‘dark’) iOS
onKeyPress 当任何一个键被按时调用,被按的键的值作为一个实参传入function,在onChange被调用之前先执行 function iOS
selectionState 请看DocumentSelectionState.js一些状态负责维持一个文档的选中信息(我也不懂什么意思,官网翻译的。) DocumentSelectionState iOS

方法:

1.isFocused()
返回值是boolean,判断当前TextInput组件当前是否获得焦点

2.clear() 移除所有输入的文本从TextInput组件。