दिलचस्प पोस्ट
मॉड्यूल। एक्सपोर्ट एक्सपोर्ट बनाम नोड। जेएस में अन्य पेज पर रीडायरेक्ट करने से पहले संदेश प्रदर्शित करें PHP में ज़िप कोड के बीच दूरी की गणना करना jqgrid: पीढ़ी के समय में सेल विशिष्ट सीएसएस वर्ग कैसे सेट करें मार्जिन और पैडिंग के बीच का अंतर? कोई संसाधन नहीं मिला जो दिए गए नाम से मेल खाता है '@ शैली / थीम। AppCompat.Light' JQuery का इस्तेमाल करते हुए उच्चतम जेड-इंडेक्स को कैसे प्राप्त करें सामग्री-प्रकार हैडर की परवाह किए बिना पायथन फ्लास्क में कच्चे POST बॉडी प्राप्त करें जावा जेनेरिक कक्षा – निर्धारित प्रकार PHP चर में एक जेएस चर पास करें Whatsapp से सभी संदेश प्राप्त करें आईओएस 10 समर्थन के साथ Xcode 7.3.1 HTTP स्थिति 404 – अनुरोधित संसाधन (/ ProjectName /) उपलब्ध नहीं है iPhone ऐप स्थानीयकरण – अंग्रेजी समस्याएं? अजगर में अपवाद के बाद पुन: प्रयास कैसे करें?

इवेंट हैंडलर के अंदर उदाहरण (इस) का उपयोग करने में असमर्थ

मैं ES6 (BabelJS के साथ) में एक साधारण घटक लिख रहा हूँ, और यह कार्य करता है this.setState काम नहीं कर रहा है

विशिष्ट त्रुटियों में कुछ ऐसा शामिल होता है

संपत्ति को 'अपरिवर्तित' के सेटटेट नहीं पढ़ा जा सकता है

या

यह .setState फ़ंक्शन नहीं है

तुम जानते हो क्यों? यहां कोड है:

 import React from 'react' class SomeClass extends React.Component { constructor(props) { super(props) this.state = {inputContent: 'startValue'} } sendContent(e) { console.log('sending input content '+React.findDOMNode(React.refs.someref).value) } changeContent(e) { this.setState({inputContent: e.target.value}) } render() { return ( <div> <h4>The input form is here:</h4> Title: <input type="text" ref="someref" value={this.inputContent} onChange={this.changeContent} /> <button onClick={this.sendContent}>Submit</button> </div> ) } } export default SomeClass 

वेब के समाधान से एकत्रित समाधान "इवेंट हैंडलर के अंदर उदाहरण (इस) का उपयोग करने में असमर्थ"

this.changeContent घटक उदाहरण के लिए this.changeContent.bind(this) माध्यम से बाध्य होने की जरूरत है। this.changeContent.bind(this) प्रोप के रूप में पारित होने से पहले, अन्यथा समारोह के शरीर में this चर घटक उदाहरण का उल्लेख नहीं होगा लेकिन window । फ़ंक्शन देखें :: बाँध

ES6 वर्गों के बजाय React.createClass का उपयोग करते React.createClass , घटक पर परिभाषित प्रत्येक गैर-जीवनचक्र विधि स्वचालित रूप से घटक उदाहरण के लिए बाध्य होती है। ऑटोबाइंडिंग देखें

ध्यान रखें कि किसी फ़ंक्शन को बाइंडिंग एक नया फ़ंक्शन बनाता है। आप या तो इसे सीधे रेंडर में बाँध सकते हैं, जिसका मतलब है कि घटक हर बार एक नया फ़ंक्शन बनाया जाएगा, या इसे अपने कन्स्ट्रक्टर में बाँध देगा, जो केवल एक ही बार आग जाएगा

 constructor() { this.changeContent = this.changeContent.bind(this); } 

बनाम

 render() { return <input onChange={this.changeContent.bind(this)} />; } 

React.refs घटक उदाहरण पर सेट हैं और React.refs पर नहीं। React.refs : आपको React.refs.someref लिए this.refs.someref को बदलने की आवश्यकता है। आपको sendContent विधि को घटक उदाहरण में बाध्य करने की भी आवश्यकता होगी ताकि यह this संदर्भ ले सके।

Morhaus सही है, लेकिन यह bind बिना हल किया जा सकता है।

आप वर्ग गुणों के प्रस्ताव के साथ एक तीर फ़ंक्शन का उपयोग कर सकते हैं:

 class SomeClass extends React.Component { changeContent = (e) => { this.setState({inputContent: e.target.value}) } render() { return <input type="text" onChange={this.changeContent} />; } } 

क्योंकि तीर फ़ंक्शन कन्स्ट्रक्टर के दायरे में घोषित किया गया है, और क्योंकि एरो फ़ंक्शंस this उनके घोषित दायरे से बनाए रखते हैं, यह सभी काम करता है। यहां नकारात्मक पक्ष यह है कि ये प्रोटोटाइप पर कार्य नहीं करते हैं, वे सभी को प्रत्येक घटक के साथ पुन: निर्मित किया जाएगा। हालांकि, एक ही बात में bind परिणाम के बाद से यह एक नकारात्मक पक्ष का अधिक नहीं है।

React.createClass() घटक परिभाषा वाक्यविन्यास React.Component कक्षा के विस्तार के तरीके को बढ़ाते React.Component यह समस्या हमारे सबसे अधिक अनुभवों में से एक है। React.Component

यह this संदर्भ में अंतर के कारण होता है React.createClass() बनाम extends React.Component

React.createClass() का उपयोग करना this संदर्भ (मूल्य) को सही ढंग से बाँध देगा, लेकिन ऐसा नहीं है जब ES6 कक्षाओं का उपयोग करना। जब यह ES6 तरीका ( React.Component बढ़ाकर। React.Component ) कर रहा है तो this संदर्भ डिफ़ॉल्ट रूप से null है। क्लास के गुण प्रतिक्रिया वर्ग (घटक) उदाहरण से स्वचालित रूप से बाँट नहीं करते हैं


इस मुद्दे को सुलझाने के लिए दृष्टिकोण

मैं कुल 4 सामान्य दृष्टिकोणों को जानता हूं

  1. क्लास कन्स्ट्रक्टर में अपने कार्यों को बाँध लें । एक सर्वोत्तम अभ्यास दृष्टिकोण के रूप में कई लोगों द्वारा विचार किया गया है जो JSX को छूने से बचा जाता है और प्रत्येक घटक पुन: रेंडर पर एक नया फ़ंक्शन नहीं बना रहा है।

     class SomeClass extends React.Component { constructor(props) { super(props); this.handleClick = this.handleClick.bind(this); } handleClick() { console.log(this); // the React Component instance } render() { return ( <button onClick={this.handleClick}></button> ); } } 
  2. अपने कार्यों को इनलाइन बाँध लें आप अभी भी यहां और वहां कुछ ट्यूटोरियल / लेख / आदि में इस दृष्टिकोण का उपयोग कर सकते हैं, इसलिए यह महत्वपूर्ण है कि आप इसके बारे में जानते हैं। यह यह 1 की तरह एक ही अवधारणा है, लेकिन यह ध्यान रखें कि किसी फ़ंक्शन को बाध्य करने से प्रत्येक पुन: रेंडर के अनुसार एक नया फ़ंक्शन निर्मित होता है।

     class SomeClass extends React.Component { handleClick() { console.log(this); // the React Component instance } render() { return ( <button onClick={this.handleClick.bind(this)}></button> ); } } 
  3. एक वसा तीर फ़ंक्शन का उपयोग करें । जब तक तीर फ़ंक्शंस, हर नए फ़ंक्शन ने this वैल्यू को अपनाया। हालांकि, तीर फ़ंक्शन this संदर्भ को अपना नहीं बनाता है, इसलिए this पुन: घटक घटक उदाहरण से मूल अर्थ है। इसलिए, हम कर सकते हैं:

     class SomeClass extends React.Component { handleClick() { console.log(this); // the React Component instance } render() { return ( <button onClick={ () => this.handleClick() }></button> ); } } 

    या

     class SomeClass extends React.Component { handleClick = () => { console.log(this); // the React Component instance } render() { return ( <button onClick={this.handleClick}></button> ); } } 
  4. उपयोगिता फ़ंक्शन लाइब्रेरी का उपयोग करके अपने कार्यों को स्वचालित रूप से बाँध लें । वहाँ कुछ उपयोगिता पुस्तकालय हैं, जो स्वचालित रूप से आपके लिए नौकरी करता है यहां कुछ लोकप्रिय हैं, बस कुछ का उल्लेख करने के लिए:

    • आटोबेंड डेकोरेटर एक एनपीएम पैकेज है जो क्लास के तरीकों को सही उदाहरण के साथ जोड़ता है, यहां तक ​​कि जब तरीकों से अलग हो जाते हैं संकुल के सन्दर्भ के सही संदर्भ में this बाइंड करने के तरीकों से पहले पैकेज @autobind का उपयोग करता है

       import autobind from 'autobind-decorator'; class SomeClass extends React.Component { @autobind handleClick() { console.log(this); // the React Component instance } render() { return ( <button onClick={this.handleClick}></button> ); } } 

      ऑटोबेंड डेकोरेटर बहुत चतुर है ताकि हमें एक घटक वर्ग के अंदर सभी विधियों को एक साथ बाँध सकें, जैसे कि दृष्टिकोण # 1

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

       import autobind from 'class-autobind'; class SomeClass extends React.Component { constructor() { autobind(this); // or if you want to bind only only select functions: // autobind(this, 'handleClick'); } handleClick() { console.log(this); // the React Component instance } render() { return ( <button onClick={this.handleClick}></button> ); } } 

      पीएस: अन्य बहुत ही इसी तरह की लाइब्रेरी है Autobind पर प्रतिक्रिया दें ।


सिफ़ारिश करना

अगर मैं आप थे, तो मैं दृष्टिकोण # 1 के साथ रहना होगा हालांकि, जैसे ही आप अपने क्लास कन्स्ट्रक्टर में एक टन बांध लेते हैं, मैं आपको सलाह # 4 में उल्लिखित सहायक पुस्तकालयों में से एक का पता लगाने की सलाह दूंगा।


अन्य

यह आपकी इस समस्या से संबंधित नहीं है, लेकिन आपको रिफर्स का इस्तेमाल नहीं करना चाहिए

आपका पहला झुकाव आपके ऐप में "चीज़ें बनने" के लिए रेफरी का उपयोग करना हो सकता है यदि यह मामला है, तो एक पल लें और इस बारे में और अधिक गंभीर रूप से सोचें कि किस प्रकार घटक पदानुक्रम में राज्य का स्वामित्व होना चाहिए।

इसी तरह के प्रयोजनों के लिए, नियंत्रित घटक का उपयोग करते हुए, जिसकी आपको ज़रूरत है, वैसे ही पसंदीदा तरीका है। मैं सुझाव है कि आप अपने घटक state का उपयोग करने पर विचार करें। तो, आप बस इस तरह से मूल्य का उपयोग कर सकते हैं: this.state.inputContent

हमें घटकों के अनुसार घटक के साथ घटना फ़ंक्शन को बाध्य करने की आवश्यकता है,

 import React from 'react' class SomeClass extends React.Component { constructor(props) { super(props) this.state = {inputContent: 'startValue'} this.changeContent = this.changeContent.bind(this); } sendContent(e) { console.log('sending input content '+React.findDOMNode(React.refs.someref).value) } changeContent(e) { this.setState({inputContent: e.target.value}) } render() { return ( <div> <h4>The input form is here:</h4> Title: <input type="text" ref="someref" value={this.inputContent} onChange={this.changeContent} /> <button onClick={this.sendContent}>Submit</button> </div> ) } } export default SomeClass 

धन्यवाद

यह समस्या हो रही है क्योंकि यह this.changeContent और this.changeContent onClick={this.sendContent} घटक के उदाहरण के लिए बाध्य नहीं है।

ईएस 6 के तीर कार्यों का उपयोग करने के लिए कन्स्ट्रक्टर ()) में बाँध () का उपयोग करने के अलावा एक अन्य समाधान है, जो आस-पास के कोड का एक ही लेक्सिकल स्कोप साझा करते हैं और इसे बनाए रखते हैं, ताकि आप अपने कोड को रेंडर () में बदल सकें हो:

 render() { return ( <input type="text" onChange={ () => this.changeContent() } /> <button onClick={ () => this.sendContent() }>Submit</button> ) } 

हैलो अगर आप अपने फ़ंक्शन कॉल को बाध्य करने के बारे में ध्यान नहीं देना चाहते हैं आप 'क्लास-ऑटोबिंड' का उपयोग कर सकते हैं और इसी तरह आयात कर सकते हैं

 import autobind from 'class-autobind'; class test extends Component { constructor(props){ super(props); autobind(this); } 

सुपर कॉल करने से पहले सुपर कॉल लिखिए, क्योंकि यह काम नहीं करेगा

यदि आप कंडक्टर वाक्यविन्यास में बाइंड रखना चाहते हैं, तो आप प्रस्ताव-बाइंड-ऑपरेटर का उपयोग कर सकते हैं और अपना कोड बदल सकते हैं जैसा कि अनुसरण करें:

 constructor() { this.changeContent = ::this.changeContent; } 

के बजाय :

 constructor() { this.changeContent = this.changeContent.bind(this); } 

बहुत सरल, bind(this) आवश्यकता नहीं है bind(this) या fatArrow

आप इसे तीन तरीकों से निपट सकते हैं

1. निर्माता के रूप में घटना फ़ंक्शन को निम्नानुसार रखें

 import React from 'react' class SomeClass extends React.Component { constructor(props) { super(props) this.state = {inputContent: 'startValue'} this.changeContent = this.changeContent.bind(this); } sendContent(e) { console.log('sending input content '+React.findDOMNode(React.refs.someref).value) } changeContent(e) { this.setState({inputContent: e.target.value}) } render() { return ( <div> <h4>The input form is here:</h4> Title: <input type="text" ref="someref" value={this.inputContent} onChange={this.changeContent} /> <button onClick={this.sendContent}>Submit</button> </div> ) } } export default SomeClass 

2. जब उसे बुलाया जाता है तो इसे हटा दें

 import React from 'react' class SomeClass extends React.Component { constructor(props) { super(props) this.state = {inputContent: 'startValue'} } sendContent(e) { console.log('sending input content '+React.findDOMNode(React.refs.someref).value) } changeContent(e) { this.setState({inputContent: e.target.value}) } render() { return ( <div> <h4>The input form is here:</h4> Title: <input type="text" ref="someref" value={this.inputContent} onChange={this.changeContent} /> <button onClick={this.sendContent.bind(this)}>Submit</button> </div> ) } } export default SomeClass 

3. ऐरो फ़ंक्शंस का उपयोग करके

 import React from 'react' class SomeClass extends React.Component { constructor(props) { super(props) this.state = {inputContent: 'startValue'} } sendContent(e) { console.log('sending input content '+React.findDOMNode(React.refs.someref).value) } changeContent(e) { this.setState({inputContent: e.target.value}) } render() { return ( <div> <h4>The input form is here:</h4> Title: <input type="text" ref="someref" value={this.inputContent} onChange={this.changeContent} /> <button onClick={()=>this.sendContent()}>Submit</button> </div> ) } } export default SomeClass