रिएक्ट

Question

में किसी बच्चे के घटक के लिए इवेंट हैंडलर को कैसे पास किया जाए मेरे पास <Button /> घटक है जो मैंने अपने अनुप्रयोग में स्टाइल के कुछ स्टाइल को प्रस्तुत किया है। मैं इसे दो अलग-अलग संदर्भों में उपयोग कर रहा हूं - एक लॉगिन फॉर्म जमा करने के लिए, और दूसरा पंजीकरण पृष्ठ (और शायद भविष्य में अन्य संदर्भ) पर नेविगेट करने के लिए।

मैं यह पता लगाने की कोशिश कर रहा हूं कि ईवेंट हैंडलर को मूल घटक से <Button /> पर कैसे पास किया जाए। मैं लॉगिन फॉर्म के लिए onSubmit हैंडलर को कॉल करना चाहता हूं, लेकिन नेविगेशन बटन के लिए onClick हैंडलर को कॉल करना चाहता हूं। क्या यह संभव है?

<Button text={callToAction} style={styles.callToActionButton} onClick={() => FlowRouter.go("Auth")}/> 

<Button text="Go!" style={styles.registerButton} onSubmit={() => this.register(this.state.user, this.state.password)}/> 

मैं भी तीर समारोह, जो सिर्फ निष्पादित करने के लिए जब घटक भरी हुई है कार्यों का कारण बनता है को दूर करने की कोशिश की है:

मैं इस तरह घटक बुला की कोशिश की है

// executes event handlers on page load 
<Button text={callToAction} style={styles.callToActionButton} onClick={FlowRouter.go("Auth")}/> 

<Button text="Go!" style={styles.registerButton} onSubmit={this.register(this.state.user, this.state.password)}/> 

Answer 1

सामान्य में पर

_onClick: function(e) { 
    if (!this.props.onClick) { 
    return; 
    } 
    this.props.onClick(e); 
} 

और उसके बाद, आप के लिए onClick हैंडलर अग्रेषित कर सकते हैं एक संपत्ति के रूप में इसे पारित करके अपने बटन वर्ग। आप अपने बटन घटक के लिए प्रोप टाइप को परिभाषित करके एक आवश्यक प्रोप बना सकते हैं।

एक उदाहरण के रूप में, मैं एक छोटा स्निपेट पता चलता है कि यह कैसे

var StyledButton = React.createClass({ 
 
    propTypes: { 
 
    // the StyledButton requires a clickHandler 
 
    clickHandler: React.PropTypes.func.Required, 
 
    // and I guess the text can be seen as required as well 
 
    text: React.PropTypes.string.required 
 
    }, 
 
    render: function() { 
 
    // as you are sure you have a clickHandler, you can just reference it directly from the props 
 
    return <button type="button" onClick={this.props.clickHandler}>{this.props.text}</button>; 
 
    } 
 
}); 
 

 
var MyForm = React.createClass({ 
 
    getInitialState() { 
 
    return { 
 
     clicked: 0 
 
    }; 
 
    }, 
 
    click() { 
 
    this.setState({clicked: this.state.clicked+1}); 
 
    \t alert('ouch'); 
 
    }, 
 
    secondClickHandler() { 
 
    this.setState({clicked: 0}); 
 
    alert(':('); 
 
    }, 
 
    render() { 
 
    // your parent component simply sets which button 
 
    return <fieldset> 
 
     <div> 
 
    \t <StyledButton clickHandler={this.click} text="Click me" /> 
 
      { (this.state.clicked > 0) && <StyledButton clickHandler={this.secondClickHandler} text="Not again" /> } 
 
     </div> 
 
    </fieldset>; 
 
    } 
 
}); 
 

 
ReactDOM.render(
 
    <MyForm />, 
 
    document.getElementById('container') 
 
);

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.0.2/react.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.0.2/react-dom.min.js"></script> 
 
<div id="container"> 
 
    <!-- This element's contents will be replaced with your component. --> 
 
</div>

भी काम करता है जोड़ा, आप सामान्य उपयोग में एक बटन के विधि प्रस्तुत नहीं होगा, आप बल्कि होगा एक webservice को प्राप्त डेटा भेजें, और परिणाम प्राप्त होने पर किसी भी बदलाव को संभालें। सबमिट वर्तमान वेबसाइट को मारता है और एजेक्स कॉल या स्टोर के साथ, सब कुछ लोड करने की जरूरत है, यह केवल परिणाम की प्रतीक्षा कर सकता है और फिर

Answer 2

हमने इसे कैसे संभाला है, हमारे पास एक बटन घटक है जो एक टैग प्रस्तुत करता है और उसके बाद हमारे पास एक href प्रोप और ऑनक्लिक प्रोप होता है जिसे आप पास कर सकते हैं। अगर यह लिंक सिर्फ href के बटन पर जाता है और यदि आप चाहें यह एक फ़ंक्शन निष्पादित करने के लिए बस इसे ऑनक्लिक प्रो में पास करें पी और सुनिश्चित करें कि यह एक टैग पर सेट हो जाता है।

बटन घटक हम भी सेटअप एक कस्टम onClick समारोह है कि इस तरह दिखता है में: एक टैग

<a href={this.props.href} onClick={this._onClick} />