Как показать выбранное значение из модального в текстовом компоненте в реагирующем - PullRequest
Новая
       26

Как показать выбранное значение из модального в текстовом компоненте в реагирующем

1 голос
/ 24 января 2020

Как установить выбранное значение из модального для текстового компонента вact-native.

Я использую модальный компонент из'act-native '.

import {StyleSheet, View, Text, TouchableOpacity, Image, Modal,} из'act-native '

        <View style={styles.vwstyle}>
            <Text style={styles.texthead}>You are Interested in</Text>

            <View style={styles.vwside}>
                <Modal
                    animationType="fade"
                    transparent={false}
                    visible={this.state.modalVisible}

                    onRequestClose={() => {
                    }}>
                    <View style={styles.vwmodal}>

                        <TouchableOpacity style={styles.touchmodal}
                            onPress={() => {
                                this.setModalVisible(!this.state.modalVisible);
                            }}>
                            <Text style={styles.txtmodal}>Man</Text>
                        </TouchableOpacity>
                        <TouchableOpacity style={styles.touchmodal}
                            onPress={() => {
                                this.setModalVisible(!this.state.modalVisible);
                            }}>
                            <Text style={styles.txtmodal}>Woman</Text>
                        </TouchableOpacity>
                        <TouchableOpacity style={styles.touchmodal}
                            onPress={() => {
                                this.setModalVisible(!this.state.modalVisible);
                            }}>
                            <Text style={styles.txtmodal}>Everyone</Text>
                        </TouchableOpacity>

                    </View>
                </Modal>

                    <TouchableOpacity 
                    style={{flexDirection:'row'}}
                     onPress={() => {this.setModalVisible(true);}}>
                         <Text style={styles.txtselected}>Woman</Text>
                        <Image
                            source={require('../Images/rightarrow.png')} style={{ height: 20, width: 20, marginTop: 8, marginRight: 5 }} />
                        </TouchableOpacity>
            </View>
        </View>

1 Ответ

1 голос
/ 24 января 2020

Вы можете использовать состояние для удержания нажатых значений. Я включил здесь фрагмент кода для вашей справки. 

    constructor(props) {
      super(props);
      this.state = {
       otherStateVariables..... , 
    pressedOption: ""

}
    }
    render() {
    <View style={styles.vwstyle}>
            <Text style={styles.texthead}>You are Interested in</Text>

            <View style={styles.vwside}>
                <Modal
                    animationType="fade"
                    transparent={false}
                    visible={this.state.modalVisible}

                    onRequestClose={() => {
                    }}>
                    <View style={styles.vwmodal}>

                        <TouchableOpacity style={styles.touchmodal}
                            onPress={() => {
                                this.setModalVisible(!this.state.modalVisible);
                                /* Add this line to set your state on onPress handler*/
                                this.setState({pressedOption:"Man"})
                            }}>
                            <Text style={styles.txtmodal}>Man</Text>
                        </TouchableOpacity>
                        <TouchableOpacity style={styles.touchmodal}
                            onPress={() => {
                                this.setModalVisible(!this.state.modalVisible);
                                /* Add this line to set your state on onPress handler*/
                                this.setState({pressedOption:"Woman"})
                            }}>
                            <Text style={styles.txtmodal}>Woman</Text>
                        </TouchableOpacity>
                        <TouchableOpacity style={styles.touchmodal}
                            onPress={() => {
                                this.setModalVisible(!this.state.modalVisible);
                                /* Add this line to set your state on onPress handler*/
                                this.setState({pressedOption:"Everyone"})
                            }}>
                            <Text style={styles.txtmodal}>Everyone</Text>
                        </TouchableOpacity>

                    </View>
                </Modal>

                    <TouchableOpacity 
                    style={{flexDirection:'row'}}
                     onPress={() => {this.setModalVisible(true);}}>
                         <Text style={styles.txtselected}>Woman</Text>
                        <Image
                            source={require('../Images/rightarrow.png')} style={{ height: 20, width: 20, marginTop: 8, marginRight: 5 }} />
                        </TouchableOpacity>
            </View>
        </View>
    }

После установки состояния вы можете использовать эту переменную состояния в любом месте вашего кода, используя 

this.state.pressedOption
...