मैं Semantic-ui-react redux और react-router-dom का उपयोग कर रहा हूं। मेरे घटक में मेरे पास नेवबार है:

<Menu >     
  <Menu.Item as={Link} to="/" onClick = {this.onNavBarItemCLick()}>
    home
  </Menu.Item>

  <Menu.Item as={Link} to="profile" onClick = {this.onNavBarItemCLick()}>
    profile
  </Menu.Item>

  <Menu.Item as={Link} to="shop" onClick = {this.onNavBarItemCLick()}>
    shop
  </Menu.Item>
</Menu>

अगर मैं एनएवी आइटम विधि onNavBarItemClick में से एक पर क्लिक करता हूं तो 3 बार आग लगती है। ऐसा क्यों होता है?

0
Sam Fisher 4 अप्रैल 2018, 11:54

3 जवाब

जब आप this.onNavBarItemClick() करते हैं, तो क्या होता है कि कोष्ठक उस बिंदु पर फ़ंक्शन निष्पादित करता है। जबकि this.onNavBarItemClick इसे एक वेरिएबल के रूप में मानेंगे।

तो कोड के उपरोक्त भाग में, जब आप onClick = {this.onNavBarItemClick()} करते हैं, तो उपयोगकर्ता द्वारा उस पर क्लिक किए बिना फ़ंक्शन को वहां ही कॉल किया जा रहा है। जबकि यदि आप onClick = {this.onNavBarItemCLick} करते हैं तो फ़ंक्शन केवल तभी लागू होता है जब आप उस पर क्लिक करते हैं।

आप onClick = {()=>this.onNavBarItemClick()} भी कर सकते हैं। ऐसा करके आप एक अनाम फ़ंक्शन बना रहे हैं और इसे onClick पर भेज रहे हैं।

तो आप onClick = {this.onNavBarItemClick} या onClick = {()=> this.onNavBarItemClick()} में से कोई भी कर सकते हैं

0
illiteratewriter 4 अप्रैल 2018, 09:51

क्योंकि आपको इसे तुरंत ऑनक्लिक प्रोप में कॉल नहीं करना चाहिए। इसका उपयोग

<Menu.Item as={Link} to="/" onClick = {this.onNavBarItemCLick}>

अंत में क्या हो रहा है, जब राज्य में परिवर्तन होता है तो हर बार रेंडर फ़ंक्शन को कॉल करने पर onNavBarItemCLick को कॉल किया जाता है

1
Abderrahmane TAHRI JOUTI 4 अप्रैल 2018, 08:56

चूंकि आप तुरंत विधि को कॉल करते हैं, इसके बजाय आपको केवल हैंडलर को ऑनक्लिक विशेषता पर पास करना चाहिए:

as={Link} to="shop" onClick = {this.onNavBarItemCLick.bind(this)}>
3
Artem Mirchenko 4 अप्रैल 2018, 08:56