प्रतिक्रियाशील मूल पर स्वचालित रूप से कॉल किया जा रहा है

Question

मुझे प्रतिक्रिया फ़ीचर पर प्रतिक्रिया-मूल के साथ समस्या हो रही है। ऑनप्रेस केवल तभी काम करना चाहिए जब इसे वास्तव में टच इवेंट (मुझे लगता है) द्वारा ट्रिगर किया गया हो, वह तब होता है जब मैं स्क्रीन पर बटन दबाता हूं। लेकिन ऐसा लगता है कि जब रेंडर फ़ंक्शन कहा जाता है तो ऑनप्रेस स्वयं ट्रिगर हो जाता है। जब मैं मैन्युअल रूप से प्रेस करने का प्रयास करता हूं, तो यह काम नहीं करता है।

import React, { Component } from 'react'; 
    import { PropTypes, Text, View ,Alert } from 'react-native'; 
    import { Button } from 'react-native-material-design'; 

export default class Home extends Component { 

    render() { 
    return (
      <View style={{flex:1}}> 
      <Button value="Contacts" raised={true} onPress={this.handleRoute('x')} /> 
      <Button value="Contacts" raised={true} onPress={this.handleRoute('y')} /> 
      <Button value="Contacts" raised={true} onPress={this.handleRoute('z')} /> 
      </View> 
     ); 
} 
handleRoute(route){ 
    alert(route) // >> x , y, z 
    } 
} 

    module.exports = Home; 

मुझे क्या याद आ रही है? क्या मैंने कुछ तरीके से गलत किया है या यह कुछ बग है? किसी भी सुझाव की अत्यधिक सराहना की जाती है।

Video

Answer 1

onPress = {this.handleRoute ('एक्स')} // इस मामले में handleRoute समारोह जैसे ही हो प्रस्तुत करना कहा जाता है

को बदलने की कोशिश

onPress = {() => this.handleRoute.bind ('x')} // इस मामले में हैंडल रूट डी

onPress={this.handleRoute.bind(this, 'x')} 

या इस:

onPress={() => this.handleRoute('x')} 

कारण यह है कि onPress एक तर्क के रूप में एक समारोह के रूप में लेता है प्रस्तुत करना होता

Answer 2

आप इस के लिए बदल सकते हैं oesn't जैसे ही कहा जाता है। अपने कोड में, आप फ़ंक्शन को कॉल कर रहे हैं और पर प्रेस ईवेंट पर बाद में कॉल करने के लिए प्रतिक्रिया के लिए फ़ंक्शन को तुरंत लौट रहे हैं (जब रेंडर किया जाता है)।

कारण आपको बाइंड (यह) की आवश्यकता है क्योंकि जब आप बस (this.handleRoute) करते हैं तो फ़ंक्शन इसे बाध्य उदाहरण खो देता है और आपको यह कहना है कि यह उपयोग करने के लिए है। बाइंड फ़ंक्शन बाद में फ़ंक्शन पर कॉल करने के लिए अन्य तर्क लेता है। बाइंड पर अधिक वर्णनात्मक जानकारी के लिए https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/bind देखें।

एक और तरीका है जिसमें आप कन्स्ट्रक्टर में बाध्य कर सकते हैं। आप यहां प्रतिक्रिया में इसे संभालने के तरीकों के बारे में पढ़ सकते हैं: https://facebook.github.io/react/docs/handling-events.html