Question

当用户从平面列表中选择项目时，我希望将所选项目设置为输入字段。我正在使用平面列表视图来显示来自数据库的平面列表中的显示记录数据

请任何人帮助我，我能做什么，告诉我我做错了

searchText(e) {
    this.setState({ searchCustomer: text, display_List: 'flex' })
    let text = e.toLowerCase()
    let trucks = C_name
}
renderRow = (item) => {
    return (
        <TouchableOpacity>
            <ListItem
                hideChevron={true}
                // item={item}
                title={`${item} `}
                onPressItem={this.onPressAction(item)}
            />
        </TouchableOpacity>
    );
}
onPressAction = (rowItem) => {
    console.log('ListItem was selected');
    // console.log(`User${rowItem}`);
    console.log(`User${rowItem.value}`);
    this.setState({
        selectedItem: rowItem.value
    });
    //  console.log(`User${this.state.selectedItem}`);
}
render() {
    return (        
                <FormLabel>Search Customer</FormLabel>
                <FormInput
                    inputStyle={styles.SearchCustomer}
                    placeholder="Search Customer"
                    value={this.state.selectedItem}
                    onChangeText={(text) => this.searchText(text)} />
                <List
                    containerStyle={{
                        display: this.state.display_List,
                        borderTopWidth: 0, borderBottomWidth: 0,
                    }}>
                    <FlatList
                        ItemSeparatorComponent={this.renderSeparator}
                        data={C_name}
                        rightIcon='hideChevron'
                        extraData={this.state}
                        keyExtractor={(item) => item}
                        renderItem={({ item }) => (                               
                            this.renderRow(item)
                        )} />
                </List>


        );
    }

}

Answer 1

 renderRow = (item) => {
    return (
        <TouchableOpacity>
            <ListItem
                hideChevron={true}
                id={item.CCODE}
                onPress={() => this.onPressAction(item.CNAME)}
                title={`${item.CNAME} `}
            />
        </TouchableOpacity>
    );
};

onPressAction = (name) => {
    this.setState( {
        searchCustomer:name,display_List: 'none'
    }); 
};

render() {
    return (
        <ScrollView>
            <View style={styles.container}>
               <FormLabel>Search Customer</FormLabel>
                <FormInput
                    inputStyle={styles.SearchCustomer} 
                    placeholder="Search Customer"
                    onChangeText={(text) => {this.searchText(text)}}
                    value={this.state.searchCustomer}
                  />

                <List
                    containerStyle={{
                        display: this.state.display_List,
                        borderTopWidth: 0, borderBottomWidth: 0,
                    }}>
                    <FlatList
                        ItemSeparatorComponent={this.renderSeparator}
                        data={C_name}
                        rightIcon='hideChevron'
                        extraData={this.state}
                        keyExtractor={(item) => item.CCODE}
                        renderItem={({ item }) => (
                            this.renderRow(item)
                        )} />
                </List>
            </View>
            </ScrollView>

我这样做并且工作正常

我想将flat list view的选定值设置为react native中的输入字段

1 个答案: