TextInput输入框右侧添加按钮如：删除

最新推荐文章于 2024-07-14 22:18:00 发布

孑书力

最新推荐文章于 2024-07-14 22:18:00 发布

阅读量9k

点赞数

分类专栏： react-native 文章标签： react-native

本文链接：https://blog.csdn.net/cjw8990/article/details/79351560

版权

react-native 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

TextInput文本框右侧显示“清除”按钮。

这里写图片描述
在RN api中有介绍

clearButtonMode enum('never', 'while-editing', 'unless-editing', 'always')  
显示“清除”按钮

但是只是适用于ios系统
为了在Android系统正常适用，写组件来适配。

思路：
需要按钮显示和隐藏卡，就需要监听TextInput 输入的内容,如果内容为空不显示按钮，如果内容不为空则显示按钮。
实现：

// 构造
    constructor(props) {
        super(props);
        // 初始状态
        this.state = {
            inputValue: "",
        };
        this.onChange = this._onChange.bind(this);
    }

     _onChange(changeText) {
        this.setState({
            inputValue: changeText,
        });
    }

    render() {
        let {inputValue} = this.state;
        return (
            <View style={styles.container}>
                <TextInput
                    clearButtonMode={'never'}
                    value={inputValue}
                    onChangeText={this.onChange}/>
                {this._isNull(inputValue) ? null : this._getRightButtonView()}
            </View>
        );
    }

    _isNull(str) {
         let result = true;
        if (str === "" || str === undefined) {
            result = true;
        }

        if (str.length > 0) {
            result = false;
        }
        return result;
    }

    _getRightButtonView() {
        //右侧按钮图
        let source = this.props.source ? this.props.source : require('../img/input_close.png');
        return (
            <TouchableOpacity activeOpacity={0.5}
                              style={styles.closeOpacityStyle}
                              onPress={() => {
                                  this.setState({inputValue: ""})
                              }}>
                <Image style={styles.closeStyle}
                       source={source}/>
            </TouchableOpacity>)
    }

方法实现，但是不好复用，单独写成一个组件会好些。
问题来了：如右侧不是清除，有可能是问号“?”，这些问题我们是否需要考虑
贴代码

'use strict';
import React, {Component, PropTypes} from "react";

import {
    StyleSheet,//样式
    View,//视图组件；
    Image,//图片
    TextInput,//输入框
    TouchableOpacity,//一个类似button的组件
} from "react-native";

export default class TextInputRigthButton extends Component {

// 传递参数属性定义
    static PropTypes = {
        onButtonClick: PropTypes.func.isRequired
    }

    // 构造
    constructor(props) {
        super(props);
        // 初始状态
        this.state = {
            inputValue: "",
        };
        this.onChange = this._onChange.bind(this);
    }

    _isNull(str) {
         let result = true;
        if (str === "" || str === undefined) {
            result = true;
        }

        if (str.length > 0) {
            result = false;
        }
        return result;
    }


    render() {
        let {inputValue} = this.state;
        return (
            <View style={styles.container}>
                <TextInput
                    underlineColorAndroid="transparent"
                    numberOfLines={1}
                    clearButtonMode={'never'}
                    maxLength={50}
                    value={inputValue}
                    onChangeText={this.onChange}
                    {...this.props}/>
                {this._isNull(inputValue) ? null : this._getRightButtonView()}
            </View>
        );
    }

    _getRightButtonView() {
        //右侧按钮图 
        //自定义 按钮图
        let source = this.props.source ? this.props.source : require('../../img/input_close.png');
        return (
            <TouchableOpacity activeOpacity={0.5}
                              style={styles.closeOpacityStyle}
                              onPress={() => {
                                  this.props.onButtonClick();
                              }}>
                <Image style={styles.closeStyle}
                       source={source}/>
            </TouchableOpacity>)
    }

    //清除输入款中的值
    clearInputValue() {
        this.setState({inputValue: ""})
    }

    //获取输入款中的值
    getInputValue() {
        return this.state.inputValue;
    }

    _onChange(changeText) {
        this.setState({
            inputValue: changeText,
        });
    }

}

const styles = StyleSheet.create(
    {
        container: {
            flex: 1,
            flexDirection: 'row',
            alignItems: 'center'
        },
        closeStyle: {
            height: 18,
            width: 18,
        },
        closeOpacityStyle: {
            height: 54,
            width: 54,
            justifyContent: 'center',
        },
    }
)

使用

 <TextInputRigthButton
        numberOfLines={1}
        underlineColorAndroid="transparent"
        maxLength={50}
        style={{
            fontSize: 16,
            color: "#333333",
            width: width - DP.dp11 * 3 - DP.dp40,//给TextInput设置宽度，根据需要来
        }}
        ref={(c) => this.email = c}
        onButtonClick={()=>{
            //根据需要自己控制
            this.email.clearInputValue();
        }}
        placeholder={"请输入您的邮箱"}
        placeholderTextColor={"#999999"}/>