प्रतिक्रिया देशी में पाठ घटक पर मोडल से चयनित मान कैसे सेट करें।

मैं 'प्रतिक्रिया देशी' से मोडल घटक का उपयोग कर रहा हूँ।

'प्रतिक्रिया-मूल' से आयात { StyleSheet, View, Text, TouchableOpacity, Image, Modal,}

        <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>
0
Raghu singh 24 जिंदा 2020, 10:28

1 उत्तर

सबसे बढ़िया उत्तर

दबाए जा रहे मूल्यों को पकड़ने के लिए आप राज्य का उपयोग कर सकते हैं। मैं आपके संदर्भ के लिए यहां एक कोड स्निपेट शामिल कर रहा हूं।

    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
1
Anus Kaleem 24 जिंदा 2020, 08:12