किसी अन्य पृष्ठ पर कैसे जाएं प्रतिक्रिया पर क्लिक करें

Question

मैं प्रतिक्रिया करने के लिए नया हूं और जब कोई उपयोगकर्ता बटन पर क्लिक करता है तो मैं एक और पृष्ठ लोड करने की कोशिश कर रहा हूं। मैंने खिड़की का उपयोग किया है। स्थान लेकिन जब मैं बटन पर क्लिक करता हूं तो कुछ नहीं होता है। इसे कैसे ठीक करें?

यह जहां मैं अपने onClick

को शामिल किया है

<div> 
    <img className="menu_icons" src={myhome}/> 
    <label className="menu_items" onClick={home}>Home</label> 
</div> 

समारोह onClick

function home(e) { 
    e.preventDefault(); 
    window.location = 'my-app/src/Containers/HomePage.jsx'; 
} 

Answer 1

आप विधि this का उपयोग कर संदर्भित करने के लिए की जरूरत के लिए लिखा है, अन्यथा प्रतिक्रिया यह नहीं मिल रहा है।

<div> 
    <img className="menu_icons" src={myhome}/> 
    <label className="menu_items" onClick={this.home}>Home</label> 
</div> 

Answer 2

तुम सच में मैं React Router उपयोग करने का सुझाव था एक ही ऐप्लिकेशन का निर्माण करना चाहते हैं। नहीं तो आप सिर्फ सादा जावास्क्रिप्ट इस्तेमाल कर सकते हैं:

1. शैली अपने बटन
2. उपयोग एक <button> के रूप में एक <a> और प्रोग्राम के अनुप्रेषित
:

वहाँ अपनी इच्छा पर निर्भर करता है करने के दो मुख्य तरीके हैं आप करना चाहते हैं

चूंकि आपके प्रश्न के मुताबिक मेरी धारणा यह है कि आप एक पृष्ठ ऐप नहीं बना रहे हैं और प्रतिक्रिया राउटर के साथ कुछ उपयोग कर रहे हैं। और विशेष रूप से उल्लेख किया button नीचे के उपयोग

var Component = React.createClass({ 
    getInitialState: function() { return {query: ''} }, 
    queryChange: function(evt) { 
    this.setState({query: evt.target.value}); 
    }, 
    handleSearch: function() { 
    window.location.assign('/search/'+this.state.query+'/some-action'); 
    }, 
    render: function() { 
    return (
     <div className="component-wrapper"> 
     <input type="text" value={this.state.query} /> 
     <button onClick={this.handleSearch()} className="button"> 
      Search 
     </button> 
     </div> 
    ); 
    } 
}); 

गलतियों मैं अपनी पोस्ट के अनुसार देखने

1. समारोह जो window.location का उपयोग करता है ठीक से विधि में नहीं बुलाया जाता है प्रस्तुत करना
2. आप window.location.assign() इस्तेमाल कर सकते हैं एक नमूना कोड है विधि जो नया दस्तावेज़
3. लोड करने में मदद करता है मुझे संदेह है कि JSX पृष्ठ सीधे ब्राउज़र स्तर पर प्रस्तुत किए जाते हैं जब आप उन्हें सीधे कॉल करने का प्रयास करते हैं

आशा इस में मदद मिलेगी, नहीं है और आप एक जवाब यह पता लगाने साझा करें

Answer 3

आप अपने घटक के निर्माता में हैंडलर बाध्य करने के लिए की जरूरत है, अन्यथा कोई प्रतिक्रिया नहीं अपने home समारोह को खोजने के लिए सक्षम हो जाएगा ।

constructor(props) { 
    super(props); 
    this.home = this.home.bind(this); 
}