कोलाहल

Question

साथ ES6 (? 7) में .bind बचें

मैं अपने JSX में यह है:

<Options options={options} onOptionSelect={this.onOptionSelect.bind(this)} /> 

हालांकि, मैं कसम खाता हूँ मैं कुछ fanciness देखा है जब कॉलबैक तरीकों के लिए नीचे गुजर .bind के लिए की जरूरत नकारना करने के लिए बच्चे प्रतिक्रिया घटक, क्या मैं सही हूँ?

Answer 1

आप उपयोग कर सकते हैं एक arrow function संपत्ति आरंभीकरण के साथ संयुक्त।

class Component extends React.Component { 
    handleClick =() => { 
    console.log(this.props); 
    } 

    render() { 
    return <div onClick={this.handleClick} /> 
    } 
} 

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

Answer 2

आप एक घटक इस autoBind सहायक समारोह के साथ ES2015 वर्ग सिंटेक्स के उपयोग के सभी कार्यों को बाध्य कर सकते हैं:

class Component extends React.Component { 
    constructor(props) { 
    super(props); 
    autoBind(this); 
    } 

    onOptionSelect() { 
    // do stuff 
    } 

    render() { 
    return <Options options={options} onOptionSelect={this.onOptionSelect} />; 
    } 
} 

function autoBind(obj) { 
    getAllMethods(obj.constructor.prototype) 
     .forEach(mtd => { 
      obj[mtd] = obj[mtd].bind(obj); 
     }); 
} 

function getAllMethods(obj) { 
    return Object.getOwnPropertyNames(obj).filter(key => typeof obj[key] == "function"); 
} 

ध्यान दें कि Component तीर कार्यों के साथ परिभाषित तरीकों का उपयोग करने के लिए नहीं है।