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

骑猪看日落 2021-09-18 08:38 517阅读 0赞

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

# TextInput的属性与方法 #

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

<table> 
 <tbody> 
  <tr> 
   <td style="width:165px;">方法</td> 
   <td style="width:683px;">描述</td> 
  </tr> 
  <tr> 
   <td style="width:165px;">clear();</td> 
   <td style="width:683px;">清空输入框的内容</td> 
  </tr> 
  <tr> 
   <td style="width:165px;">isFocused();</td> 
   <td style="width:683px;">返回值表明当前输入框是否获得了焦点</td> 
  </tr> 
 </tbody> 
</table>

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

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;

效果：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3plcGluZzg5MTEwMw_size_16_color_FFFFFF_t_70][]

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

# Keyboard的方法 #

<table> 
 <thead> 
  <tr> 
   <th style="width:280px;">方法</th> 
   <th style="width:568px;">描述</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td style="width:280px;">addListener(eventName, callback)</td> 
   <td style="width:568px;">添加一个软键盘监听事件</td> 
  </tr> 
  <tr> 
   <td style="width:280px;">removeListener(eventName, callback)</td> 
   <td style="width:568px;">移除一个软键盘监听事件</td> 
  </tr> 
  <tr> 
   <td style="width:280px;">dismiss()</td> 
   <td style="width:568px;">关闭软键盘</td> 
  </tr> 
 </tbody> 
</table>

贴上代码：

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，当点击容器(即空白处)时，关闭软键盘。效果：

![20190228005106662.gif][]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3plcGluZzg5MTEwMw_size_16_color_FFFFFF_t_70]: /images/20210812/84ac2670dc10481dba7a6c9437456db6.png
[20190228005106662.gif]: /images/20210812/24ce2958ad494d73a26db695a13acc1a.png