मैं react.js का उपयोग करना सीख रहा हूं और ईवेंट हैंडलर का उपयोग करने के लिए कुछ समस्याएं हैं। अंतिम सवाल यह होगा: क्या सर्वर साइड प्रतिपादन का उपयोग करना संभव है और ईवेंट हैंडलर को क्लाइंट को स्वचालित रूप से भेजना संभव है? मैं एक index.jsx जो मैं सर्वर साइड प्रस्तुत करना और ग्राहकReact.js सर्वरसाइड प्रतिपादन और ईवेंट हैंडलर
var React = require("react");
var DefaultLayout = require("./layout/default");
var LikeButton = React.createClass({
getInitialState: function() {
return {liked: false};
},
handleClick: function(event) {
this.setState({liked: !this.state.liked});
},
render: function() {
var text = this.state.liked ? 'like' : 'haven\'t liked';
return (
<p onClick={this.handleClick}>
You {text} this. Click to toggle.
</p>
);
}
});
var IndexComponent = React.createClass({
render: function(){
return (
<DefaultLayout title={this.props.name}>
<div>
<h1>React Test</h1>
</div>
<div id="testButton">
<LikeButton/>
</div>
<script type="text/babel" src="/js/react.js"></script>
</DefaultLayout>
)
}
});
लेकिन "बटन की तरह" किसी भी बातचीत नहीं है करने के लिए भेजने के लिए :
यहाँ मेरी उदाहरण है। इसे क्लिक करने के लिए कुछ करने के लिए मुझे यह कोड क्लाइंट पक्ष जोड़ना होगा।
var LikeButton = React.createClass({
getInitialState: function() {
return {liked: false};
},
handleClick: function(event) {
this.setState({liked: !this.state.liked});
},
render: function() {
var text = this.state.liked ? 'like' : 'haven\'t liked';
return (
<p onClick={this.handleClick}>
You {text} this. Click to toggle.
</p>
);
}
});
ReactDOM.render(
<LikeButton />,
document.getElementById('testButton')
);
मैंने केवल प्रतिक्रिया.जेएस के साथ शुरुआत की और शायद मैं यहां कुछ प्रमुख अवधारणा खो रहा हूं। लेकिन पेज सर्वर पक्ष को प्रस्तुत करते समय प्रतिक्रिया.जेएस सिर्फ कोड (जिसे अब मुझे क्लाइंट में मैन्युअल रूप से जोड़ना है) क्यों नहीं बनाते? इस तरह, मेरे पास अनावश्यक कोड है और ऐसा लगता है कि यह बड़े अनुप्रयोगों में एक गड़बड़ होगी। कम से कम react.js दो LikeButtons को आकर्षित करने के लिए पर्याप्त स्मार्ट नहीं है बल्कि क्लाइंट साइड घटक में बनाए गए सर्वर पक्ष को "बाध्य" करने के लिए पर्याप्त है।
यह आपके प्रश्न से असंबंधित है, लेकिन मेरा मानना है कि आपको ऑनक्लिक पर इसे पार करने से पहले हैंडलक्लिक फ़ंक्शन को बांधना है या अन्यथा इसका सही संदर्भ नहीं है। (लेकिन मुझे यकीन नहीं है कि जब आप बटन पर क्लिक करते हैं तो आपको त्रुटि क्यों नहीं मिलेगी क्योंकि इसे कॉल करते समय त्रुटि को फेंकना चाहिए .setState) –
@actruong बाइंडिंग React.createClass का उपयोग करते समय आवश्यक नहीं है। यह ऑटो बांधता है। –
@ jeffpc1993 ओह धन्यवाद यह इंगित करने के लिए धन्यवाद! –