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