इवेंट और कंडीशनल रेंडरिंग

यूज़र की क्रियाओं पर प्रतिक्रिया करें और शर्तों के आधार पर एलिमेंट दिखाएँ या छिपाएँ।

8 मिनट · 3 प्रश्न

एक इवेंट यूज़र की एक क्रिया है: एक क्लिक, एक की-प्रेस, एक फ़ॉर्म सबमिशन... React में, आप किसी इवेंट को सुनने के लिए एक विशेष prop को एक फ़ंक्शन पास करते हैं: क्लिक के लिए onClick, टाइपिंग के लिए onChange, और इसी तरह। camelCase वर्तनी पर ध्यान दें: बड़े C के साथ onClick, न कि HTML जैसा onclick।

function AlertButton() {
  function handleClick() {
    alert("Button clicked!");
  }

  return (
    <button onClick={handleClick}>
      Click here
    </button>
  );
}

इस पाठ का दूसरा टूल है कंडीशनल रेंडरिंग, दूसरे शब्दों में किसी शर्त के आधार पर अलग-अलग चीज़ें दिखाना। एक दुकान के साइन की तरह जिस पर "Open" या "Closed" लिखा होता है, एक कॉम्पोनेंट चुन सकता है कि क्या प्रदर्शित करे। सबसे आम टूल है टर्नरी ऑपरेटर: condition ? valueIfTrue : valueIfFalse, "if... else..." लिखने का एक संक्षिप्त तरीका।

function Status({ isLoggedIn }) {
  return (
    <p>
      {isLoggedIn ? "Welcome!" : "Please sign in."}
    </p>
  );
}

और कुछ या बिल्कुल कुछ नहीं दिखाने के बारे में क्या? आप && ऑपरेटर का उपयोग करते हैं: condition && element में, एलिमेंट केवल तभी प्रदर्शित होता है जब शर्त सत्य हो। यदि यह असत्य है, तो React बस कुछ भी रेंडर नहीं करता, बिना किसी त्रुटि के।

function Cart({ itemCount }) {
  return (
    <div>
      <h3>My cart</h3>
      {itemCount > 0 && <p>{itemCount} item(s)</p>}
    </div>
  );
}

ज्ञान जांच

सुनिश्चित करें कि आपको इस पाठ के मुख्य बिंदु याद हैं।

1. React में किसी क्लिक पर प्रतिक्रिया करने के लिए आप कौन-सा prop उपयोग करते हैं?
   • onclick
   • onClick
   • clickEvent
2. onClick={handleClick} को कोष्ठकों के बिना क्यों लिखें?
   • क्योंकि JSX में कोष्ठक निषिद्ध हैं
   • पेज को तेज़ी से लोड करने के लिए
   • ताकि फ़ंक्शन क्लिक पर चले, न कि रेंडर पर
3. यदि isVisible false है तो {isVisible && <p>Info</p>} द्वारा क्या प्रदर्शित होता है?
   • बिल्कुल कुछ नहीं
   • Info पैराग्राफ फिर भी प्रदर्शित होता है
   • React एक त्रुटि संदेश दिखाता है