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

2019-04-03  本文已影响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>
        )
    }

}
上一篇下一篇

猜你喜欢

热点阅读