javascript - React.js: किसी घटक में बिना बाइंड() के एक इवेंट हैंडलर के पैरामीटर को पास करने का सबसे कुशल तरीका




reactjs (3)

मैं राज्य के नामों के लिए इस तरह का काम करता था। इस पर निर्भर करता है कि आप क्या चाहते हैं, आप यह कोशिश कर सकते हैं। ताकि, मुझे फ़ंक्शन को फिर से बाँधना न पड़े। जहाँ आप e.target.name से राज्य का नाम प्राप्त कर सकते हैं

class App extends React.Component {
  state = {
    change: ""
  };

  handleChange = e => {
    const { name, value } = e.target;
    this.setState({ [name]: value  })
  };

  render() {
    return (
      <input
        type="text"
        onChange={this.handleChange}
        name="change"
        value={this.state.change}
      />
    );
  }
}

जब आपको किसी इवेंट हैंडलर के भीतर this कीवर्ड का उपयोग करना होता है, तो आपको फ़ंक्शन (इवेंट हैंडलर) को this केर्वर्ड के साथ बाँधना होगा। अन्यथा, आपको तीर फ़ंक्शन का उपयोग करने की आवश्यकता है।

जैसे

//This function isn't bound whilst using "this" keyword inside of it.
//Still, it works because it uses an arrow function
handleClick = () => {
    this.setState({
      isClicked:true
    });
}

render() {
    return (
      <div className="App">
        <button onClick={this.handleClick}>Click</button>
      </div>
    );
}

हालाँकि, ऊपर दिए गए दृष्टिकोण के साथ, आप एक पैरामीटर पास नहीं कर सकते। आपको या तो उपयोग करने की आवश्यकता है ...

  1. फ़ंक्शन के बाद bind(this, param)
  2. अनाम तीर फ़ंक्शन

अर्थात

<button onClick={this.handleClick}>Click</button>
will be
<button onClick={this.handleClick.bind(this, 111)}>Click</button>
or
<button onClick={() => this.handleClick(111)}>Click</button>

यहाँ सवाल है।

किसी इवेंट हैंडलर के पैरामीटर को पास करने का सबसे कुशल तरीका क्या है?

आधिकारिक डॉक्टर के अनुसार, bind() उपयोग से प्रदर्शन को कमजोर किया जा सकता है, क्योंकि ...

रेंडर में Function.prototype.bind का उपयोग करने से घटक रेंडर करने पर हर बार एक नया फ़ंक्शन बनाता है

अनाम तीर फ़ंक्शन का उपयोग करने के लिए वही जाता है। डॉक्टर का कहना है कि ...

रेंडर में एरो फंक्शन का उपयोग करने से कंपोनेंट रेंडर होने पर हर बार एक नया फंक्शन बनता है

फिर, एक पैरामीटर को पारित करने का सबसे कुशल तरीका क्या होगा?

किसी भी इनपुट को सराहा जाएगा।

पुनश्च

कुछ लोगों ने पूछा है कि param कैसे निर्धारित होता है। यह गतिशील रूप से निर्धारित किया जाएगा (अर्थात हमेशा 111 नहीं)। तो, यह राज्यों, प्रॉप्स या इस वर्ग में परिभाषित कुछ अन्य कार्यों से हो सकता है।


मैंने अपनी दूसरी पोस्ट में इसे समझाया है: प्रतिक्रिया घटक में घटना पर क्लिक करें

यदि आप इसके प्रदर्शन के बारे में चिंतित हैं तो इनलाइन एरो फ़ंक्शन का उपयोग कभी न करें। आप अभी भी सार्वजनिक वर्ग विधि का उपयोग कर सकते हैं और this संदर्भ को बांध सकते हैं।

handleClick = () => () => {
    this.setState({ // this works now
      isClicked:true
    });
}

आप इस तरह से किसी भी पैरामीटर को पारित कर सकते हैं:

handleClick = (param1, param2, param3) => (event) => {

devserkan की टिप्पणी के अनुसार,

यह करी और अन्य विकल्पों के समान है। इस फंक्शन को हर रेंडर में रीक्रिएट भी किया गया है।

नहीं। यह नहीं है। डॉक्स से नोट देखें:

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

इसके अलावा, बीपर bigga-hd के कमेंट को देखें

इष्टतम प्रदर्शन के लिए रेंडर में ऐक्शन फ़ंक्शन या बाइंडिंग की घोषणा करने से बचें। रेंडर के बाहर अपने कार्यों की घोषणा करें। प्रत्येक रेंडर पर कोई अधिक कार्य आवंटन नहीं है।

इस हैंडलर को आप कैसे कहते हैं?

आप विधि को इस तरह कह सकते हैं:

onClick={this.handleClick(param1,param2,param3)}

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


render() में .bind ing या एक अनाम एरो फंक्शन बनाने के बजाय, आप render() बाहर बाध्य / बेनामी फंक्शन बना सकते हैं render() , जैसे कि तात्कालिक ऑब्जेक्ट पर, कंस्ट्रक्टर में, या ऐसा कुछ, और एक संदर्भ का उपयोग करें उस विलक्षण (फिर कभी नहीं बनाया गया) फ़ंक्शन के लिए। उदाहरण के लिए, एक बार चलाएं:

this.boundHandleClick = this.handleClick.bind(this, 111);

या

this.boundHandleClick = () => this.handleClick(111);

फिर, render में संदर्भ boundHandleClick :

return (
  <div className="App">
    <button onClick={this.boundHandleClick}>Click</button>
  </div>
);

यदि आपको render अंदर मापदंडों ( 111 ) का उपयोग करने की आवश्यकता है, तो आप यह देखने के लिए ऑब्जेक्ट लुकअप का उपयोग कर सकते हैं कि क्या उस पैरामीटर के साथ एक बाउंड फ़ंक्शन अभी तक मौजूद है। यदि ऐसा होता है, तो बस उस बाध्य फ़ंक्शन का उपयोग करें - और, इसे बनाएं ( एक बार , इसलिए जब भी आप भविष्य में उस पैरामीटर का उपयोग करते हैं तो इसे फिर से नहीं बनाना होगा):

this.boundClicks = {};
// ...
if (!this.boundClicks['111']) this.boundClicks['111'] = () => this.handleClick(111);
return (
  <div className="App">
    <button onClick={this.boundClicks['111']}>Click</button>
  </div>
);






reactjs