美文网首页
第6.3章:判断TextInput占位符字数

第6.3章:判断TextInput占位符字数

作者: 赵羽珩 | 来源:发表于2019-04-03 14:36 被阅读0次
    image.png
    import React, { Component } from 'react'
    import {
        View,
        Button,
        Platform,
        TextInput,
        ScrollView,
        KeyboardAvoidingView, TouchableOpacity, Text, Dimensions
    } from 'react-native'
    
    import PublicStyles from "../styles/PublicStyles";
    
    export default class PhoneList extends Component {
    
        constructor(props) {
            super(props);
            this.state = {
                text: '', // 1、监听文本框 有文字执行send() 、 没有文字执行more()
            }
        }
    
        render() {
    
            return (
                <View style={[PublicStyles.ju_around_Direction]}>
                    <TextInput
                        onChangeText={(text) => this.setState({text})} // 文本框内容改变执行
                        value={this.state.text}
                    />
                    {this.state.text.length > 0 ? this.more() :  this.send()}
                </View>
            )
        }
    
        // 1、监听文本框 有文字执行send() 、 没有文字执行more()
        send() {
            return(
                <TouchableOpacity style={[PublicStyles.chatSendBox,PublicStyles.ju_center,PublicStyles.al_center]} onPress={() => this.loseFocus() || this.TextInputBottomFun()  }>
                    <Text style={PublicStyles.ft16_fff}>+</Text>
                </TouchableOpacity>
            )
        }
        more() {
            return(
                <View style={[PublicStyles.chatSendBox,PublicStyles.ju_center,PublicStyles.al_center]}>
                    <Text style={PublicStyles.ft16_fff}>发送</Text>
                </View>
            )
        }
    
    }
    

    相关文章

      网友评论

          本文标题:第6.3章:判断TextInput占位符字数

          本文链接:https://www.haomeiwen.com/subject/gyfzbqtx.html