在下面的React代碼中，爲什麼沒有返回元素的引用？

class App extends React.Component { 
    method(){ 
     console.log(this); 
    } 
    render(){ 
     return (<div>   
      <button onClick={this.method}>Try it</button> 
     </div>) 
    } 
} 

ReactDOM.render(<App/>, document.getElementById('demo'));

我覺得按鈕元件驅動方法使按鍵元素對象應該已返回的undefined在下面的React代碼中，爲什麼沒有返回元素的引用？

而是爲什麼這麼發生了什麼？爲什麼你需要使用this.method.bind（這個）有它工作？

來源

2016-12-29 chitra

建議閱讀[如何「這個http://blog.andrewray.me/react-es6-autobinding-and-createclass/ –

可能的複製「關鍵字在一個函數內工作？」（http://stackoverflow.com/questions/133973/how-does-this-keyword-work-within-a-function） – aghidini

當函數傳遞給onClick被調用時，它被調用時被單擊的DOM元素的作用域，this是DOM元素。爲了得到你想要的this參考，你需要創建一個新的函數，通過參考this。有一個方便的內置方法，bind。您可以設置綁定在構造函數中，像這樣：

class App extends React.Component { 
    constructor (props) { 
     super(props); 
     this.method = this.method.bind(this); 
    } 
    method(){ 
     console.log(this); 
    } 
    render(){ 
     return (<div>   
      <button onClick={this.method}>Try it</button> 
     </div>) 
    } 
} 

ReactDOM.render(<App/>, document.getElementById('demo'));

來源

2016-12-29 15:39:45 TheSharpieOne

在下面的React代碼中，爲什麼沒有返回元素的引用？

回答

相關問題