प्रतिक्रिया घटक पर प्रतिक्रिया पर onClick घटना का उपयोग कैसे करें?

Question

मैं Reactjs राउटर से लिंक घटक का उपयोग कर रहा हूं और मुझे ऑनक्लाइक काम नहीं मिल सकता है। यह कोड है:

<Link to={this.props.myroute} onClick='hello()'>Here</Link>

क्या यह ऐसा करने का तरीका है या दूसरा तरीका है?

Answer 1

आप hello()एक स्ट्रिंग के रूप में गुजर रहे हैं , hello()इसका मतलब निष्पादन भी हैhello तुरंत ।

प्रयत्न

onClick={hello}

Answer 2

आपको इसका उपयोग करना चाहिए:

<Link to={this.props.myroute} onClick={hello}>Here</Link>

या (यदि विधि helloइस वर्ग में रहती है):

<Link to={this.props.myroute} onClick={this.hello}>Here</Link>

अपडेट: ES6 के लिए और नवीनतम यदि आप क्लिक विधि के साथ कुछ परम को बांधना चाहते हैं, तो आप इसका उपयोग कर सकते हैं:

    const someValue = 'some';  
....  
    <Link to={this.props.myroute} onClick={() => hello(someValue)}>Here</Link>

Comments

या बेहतरthis.hello.bind(this)

— वेबनेट

^ आपको वास्तव में हमेशा निर्माणकर्ता के कार्यों को बाध्य करना चाहिए क्योंकि आपके पास प्रदर्शन के मुद्दों को जन्म दे सकता है।

— नंचुक्स

लिंक "करने के लिए" की आवश्यकता है, लेकिन अक्सर मैं सिर्फ onClick () की आवश्यकता है, वर्तमान में, मुझे कुछ ऐसा करना होगा <Link to="" onClick={this.delete}>Delete</Link>। काश "यहाँ" वैकल्पिक है।

— न्यूमैन

@newman आप Linkबिना उपयोग क्यों करेंगे to? यदि आपको इसकी आवश्यकता नहीं है, तो बस कुछ अन्य घटक जैसे <button>कि onClickविधि के साथ और आप जाने के लिए अच्छा है;)।

— गुइलहर्मे ओडरडेनज

Answer 3

मेरा मानना ​​है कि यह सामान्य रूप से उपयोग करने के लिए एक अच्छा पैटर्न है। लिंक आपके ऑनक्लिक इवेंट को चलाएगा और फिर रूट पर नेविगेट करेगा, इसलिए नए रूट पर नेविगेट करने में थोड़ी देरी होगी। एक बेहतर रणनीति आपके द्वारा किए गए 'टू' प्रॉप के साथ नए मार्ग पर नेविगेट करना है, और नए घटक के घटकडिमाउंट () फ़ंक्शन में आप अपने हैलो फ़ंक्शन या किसी अन्य फ़ंक्शन को आग लगा सकते हैं। यह आपको एक ही परिणाम देगा, लेकिन मार्गों के बीच अधिक चिकनी संक्रमण के साथ।

संदर्भ के लिए, मैंने लिंक पर ऑनक्लिक इवेंट के साथ अपने रेडक्स स्टोर को अपडेट करते समय इस पर ध्यान दिया जैसे कि आप यहां हैं, और इसने नए रूट के घटक को आगे बढ़ाने से पहले ~ .3 सेकंड खाली-सफेद-स्क्रीन देरी का कारण बना। कोई एपि कॉल शामिल नहीं था, इसलिए मुझे आश्चर्य हुआ कि देरी इतनी बड़ी थी। हालाँकि, यदि आप 'हेलो' लॉगिंग को सांत्वना दे रहे हैं, तो देरी ध्यान देने योग्य नहीं है।

Comments

मेरे पास मेरे वर्तमान घटक में एक कॉलबैक url है जिसे मैं onClickनए मार्ग में परिवर्तित करने से पहले कुकी में बचत कर रहा हूं । मुझे लगता है कि अगले घटक में कॉलबैक यूआरएल नहीं मिलेगा, इसलिए मुझे खुद को संक्रमण से पहले करना होगा। क्या आपके पास इसका कोई विकल्प है? पुनश्च: कॉलबैक url ताज़ा होने के बाद भी सुलभ होना चाहिए ताकि इसे स्टोर में सहेजा जा सके।

— पार्थ मिस्त्री

यदि आप रिएक्शन-नेविगेशन का उपयोग कर रहे हैं: मैं कहूंगा कि लिंक का उपयोग न करें, बस TouchableOpacity या TouchableWithoutFeedback का उपयोग करें, फिर अपने onPress फ़ंक्शन में आप नेविगेट कर सकते हैं और अपने url को एक नौसैनिक के रूप में पारित कर सकते onPress={() => { this.props.navigation.navigate('NameOfNextScreen', { callbackUrl: 'http://.callbackUrl.com', });हैं यदि आप प्रतिक्रिया-नेविगेशन I का उपयोग नहीं कर रहे हैं बस लिंक के onClick का उपयोग करें और मामूली प्रदर्शन समस्या के बारे में चिंता न करें। यह शायद ध्यान देने योग्य नहीं होगा।

— नंचबक्स

अच्छी सलाह! धन्यवाद!

— Aspiringsoftwaredev