首页 > RN自制搜索界面中的点击函数只能运行一次。

RN自制搜索界面中的点击函数只能运行一次。

'use strict';

import React, {Component} from 'react';
import {StyleSheet, View, Text, TextInput, Dimensions} from 'react-native';

const win = Dimensions.get('window');

export default class SearchInputView extends Component {
    constructor(props) {
        super(props);
        this.state = {
            show: false,
        };
    }

    getValue(val) {
        this.setState({
            show: (val) ? true : false,
            value: val
        });
    }

    hide(val) {
        this.setState({
            show: false,
            value: val, true
        });
    }

    render() {
        return (
            <View>
                <View style={[styles.inputStyle,styles.flexDirection]}>
                    <View style={[styles.flex,styles.searchInput]}>
                        <TextInput
                            style={{textAlign:'center'}}
                            returnKeyType="search"
                            placeholder="搜索"
                            // onEndEditing={}
                            value={this.state.value}
                            onChangeText={this.getValue.bind(this)}
                        />
                    </View>
                </View>
                {
                    this.state.show ?
                        <View style={[styles.result]}>
                            <View style={styles.resultItem}>
                                <Text
                                    style={styles.resultItemFont}
                                    numberOfLines={1}
                                    onPress={this.hide.bind(this,this.state.value+'庄')}
                                >{this.state.value}庄</Text>
                            </View>
                            <View style={styles.resultItem}>
                                <Text
                                    style={styles.resultItemFont}
                                    numberOfLines={1}
                                    onPress={this.hide.bind(this,this.state.value+'园街')}
                                >{this.state.value}园街</Text>
                            </View>
                            <View style={styles.resultItem}>
                                <Text
                                    style={styles.resultItemFont}
                                    numberOfLines={1}
                                    onPress={this.hide.bind(this,'80'+this.state.value+'综合商店')}
                                >80{this.state.value}综合商店</Text>
                            </View>
                            <View style={styles.resultItem}>
                                <Text
                                    style={styles.resultItemFont}
                                    numberOfLines={1}
                                    onPress={this.hide.bind(this,this.state.value+'桃')}
                                >{this.state.value}桃</Text>
                            </View>
                            <View style={styles.resultItem}>
                                <Text
                                    style={styles.resultItemFont}
                                    numberOfLines={1}
                                    onPress={this.hide.bind(this,'杨林'+this.state.value+'园')}
                                >杨林{this.state.value}园</Text>
                            </View>
                        </View>
                        : null
                }
                <View>
                    <Text>321312</Text>
                    <Text>321312</Text>
                    <Text>321312</Text>
                    <Text>321312</Text>
                </View>
            </View>
        );
    }
}

var styles = StyleSheet.create({
    flex: {
        flex: 1,
    },
    inputStyle: {
        backgroundColor: '#CCC',
    },
    flexDirection: {
        flexDirection: 'row',
    },
    searchInput: {
        height: 45,
        borderWidth: 1,
        marginLeft: 10,
        marginRight: 10,
        marginTop: 5,
        marginBottom: 5,
        borderColor: '#CCC',
        borderRadius: 5,
        backgroundColor: '#FFF',
    },
    result: {
        width: win.width,
        borderColor: "#DDD",
        borderTopWidth: 1,
        position: 'absolute',
        left: 0,
        top: 55,
        zIndex: 1,
    },
    resultItem: {
        paddingLeft: 10,
        paddingRight: 10,
        paddingTop: 5,
        paddingBottom: 5,
        borderWidth: 1,
        borderColor: '#DDD',
        borderTopWidth: 0,
        backgroundColor: '#FFF',
    },
    resultItemFont: {
        fontSize: 16,
    }
});

搜索结果是通过this.state.show来控制的。。
当点击搜索结果的任意一个发现显示的文档会少一个。
然后再点击搜索结果没有任何反应,说明只能点击一次。

<View>
                    <Text>321312</Text>
                    <Text>321312</Text>
                    <Text>321312</Text>
                    <Text>321312</Text>
</View>

不加这些321312的文档的话,搜索结果可以点击很多次并且添加到input中。。好多坑。。。我受不了咧。

【热门文章】
【热门文章】