react-native系列(7)组件篇：TextInput输入文本框的双向绑定

文本输入框是APP中最常用的交互组件，在RN中用TextInput标签表示。使用时要注意，它依然遵循双向绑定的规则，通过定义一个state状态值赋值至输入文本框的value属性中，同时组件监听onChangeText事件来获取输入文本的变化，将变化结果传递给state状态值，从而实现双向绑定。

TextInput的属性与方法

属性	描述
style	显示的样式
value	显示的文本内容
placeholder	输入提示文本，当文本框里没有任何文本时则会显示
placeholderTextColor	输入提示文本颜色
editable	是否可编辑，默认为: true
secureTextEntry	是否为密码，默认为: false
keyboardType	弹出键盘类型，默认为: default。数字键盘numeric，邮箱键盘email-address，电话键盘phone-pad
maxLength	限制文本框中最多的字符数
multiline	是否为多行文本，默认为: false
onChangeText	当文本框内容变化时调用此函数，变化结果(即最终文本内容)将成为回调参数
onBlur	失去焦点事件
onFocus	得到焦点事件
onSubmitEditing	完成输入事件

方法	描述
clear();	清空输入框的内容
isFocused();	返回值表明当前输入框是否获得了焦点

下面是一段输入文本框的双向绑定的代码：

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

class TextInputComp extends Component {

    state = { 
        text: ''
    };

    onChangeTextHandle = (value) => {
        this.setState({text: value});
    }

    onBlurHandle = () => {
        console.log('失去焦点');
    }

    onFocusHandle = () => {
        console.log('得到焦点');
    }

    onSubmitEditingHandle = () => {
        console.log('提交内容');
    }

    render() {
        return (
            <TextInput
                style={styles.TextInputStyle} 
                value={this.state.text} 
                placeholder="请输入您需要的商品"
                placeholderTextColor='#A4A4A4'
                editable={true} // 是否可编辑，默认为: true
                secureTextEntry={false} // 是否为密码，默认为: false
                keyboardType='default' // 弹出键盘类型
                maxLength={10} // 限制文本框中最多的字符数
                multiline={false} // 是否为多行文本，默认为: false
                onChangeText={this.onChangeTextHandle} // 文本变化事件
                onBlur={this.onBlurHandle} // 失去焦点事件
                onFocus={this.onFocusHandle} // 得到焦点事件
                onSubmitEditing={this.onSubmitEditingHandle} // 提交编辑内容事件
                />
        );
    }
}

const styles = StyleSheet.create({
    TextInputStyle: {
        margin: 10,
        padding: 0,
        height: 50, 
        borderColor: 'green', 
        borderWidth: 1,
        borderRadius: 5,
        fontSize: 16,
        color: '#000000',
        paddingLeft: 10,
        backgroundColor: '#FFFFFF'
    }
});

export default TextInputComp;

效果：

测试的时候你会发现，这段代码会有个小小的易用性的问题，就是在输入完成后，用户往往会点击空白的地方来关闭软键盘而不是点击完成键，这种情况你可以通过调用软键盘Keyboard的方法来手动关闭软键盘。

Keyboard的方法

方法	描述
addListener(eventName, callback)	添加一个软键盘监听事件
removeListener(eventName, callback)	移除一个软键盘监听事件
dismiss()	关闭软键盘

贴上代码：

import React, { Component } from 'react';
import { View, TextInput, StyleSheet, TouchableWithoutFeedback, Keyboard } from 'react-native';

class KeyboardAPI extends Component {

    state = {
        text: ''
    };
    
    componentDidMount () {
        this.keyboardDidShowListener = Keyboard.addListener('keyboardDidShow', this._keyboardDidShow);
        this.keyboardDidHideListener = Keyboard.addListener('keyboardDidHide', this._keyboardDidHide);
    }
    
    componentWillUnmount () {
        this.keyboardDidShowListener.remove();
        this.keyboardDidHideListener.remove();
    }

    _keyboardDidShow () {
        console.log('软键盘显示');
    }

    _keyboardDidHide () {
        console.log('软键盘隐藏');
    }

    onChangeTextHandle = (value) => {
        this.setState({text: value});
    }

    onBlurHandle = () => {
        console.log('失去焦点');
        Keyboard.dismiss();
    }

    render() {
        return (
            <TouchableWithoutFeedback
                onPress={this.onBlurHandle}
            >
                <View style={styles.containerStyle}>
                    <TextInput
                        style={styles.TextInputStyle} 
                        value={this.state.text} 
                        placeholder="请输入您需要的商品"
                        placeholderTextColor='#A4A4A4'
                        onChangeText={this.onChangeTextHandle}
                        onBlur={this.onBlurHandle}
                    />
                </View>
            </TouchableWithoutFeedback>
        );
    }
}

const styles = StyleSheet.create({
    containerStyle: {
        flex: 1,
        backgroundColor: '#E4E4E4'
    },
    TextInputStyle: {
        margin: 10,
        padding: 0,
        height: 50, 
        borderColor: 'green', 
        borderWidth: 1,
        borderRadius: 5,
        fontSize: 16,
        color: '#000000',
        paddingLeft: 10,
        backgroundColor: '#FFFFFF'
    }
});

export default KeyboardAPI;

代码中把TextInput包裹在一个容器中，并给了容器一个点击事件外壳TouchableWithoutFeedback，当点击容器(即空白处)时，关闭软键盘。效果：