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，當點選容器(即空白處)時，關閉軟鍵盤。效果：