ReactJS的onClick功能不起作用，類型錯誤：這是空

我嘗試學習React，但似乎在新版本中也有一些變化：ReactJS的onClick功能不起作用，類型錯誤：這是空

class Reactapp extends React.Component{ 

    constructor(){ 
     super(); 
    } 

    sayMassage(){ 
     console.log(this.props.children); 
    } 

    render(){ 
     var sayMassage = this.sayMassage.bind(this); 
     return(
      <div> 
       <h3> Hello {this.props.word}</h3> 
       <p> 
        <a href="#" onClick={this.sayMassage}> 
         Click Me 
        </a> 
       </p>; 
      </div> 
     ); 
    } 
} 

ReactDOM.render(
    <div> 
     <Reactapp word="React">This is a ReactJS 15.5 Tutorial</Reactapp> 
    </div>, 
    document.getElementById('root') 
);

此代碼應工作，但似乎我失去了一些東西。它應該console.log「這是一個ReactJS 15.5教程」 super之前被調用，所以這可能不是null。

我試圖bind this，但我不知道如何，我的代碼似乎失敗。舊代碼createReactClass有auto-binding壽。

來源

2017-04-11 Bogdan Lupu

它是一個範圍的問題，只是寫在構造函數中這條線，它的工作：

this.sayMassage = this.sayMassage.bind(this);

，並刪除這一個：

var sayMassage = this.sayMassage.bind(this);

檢查工作示例：

class Reactapp extends React.Component{ 
 
    constructor(){ 
 
     super(); 
 
     this.sayMassage = this.sayMassage.bind(this); 
 
    } 
 
    
 
    sayMassage(){ 
 
     console.log(this.props.children); 
 
    } 
 

 
    render(){ 
 
     
 
     return(
 
     <div> 
 
      <h3> Hello {this.props.word}</h3> 
 
      <p> 
 
       <a href="#" onClick={this.sayMassage}> 
 
        Click Me 
 
       </a> 
 
      </p> 
 
     </div> 
 
    ); 
 
    } 
 
} 
 

 
ReactDOM.render(
 
     <Reactapp word="React">This is a ReactJS 15.5 Tutorial</Reactapp>, 
 
     document.getElementById('root') 
 
);

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script> 
 

 
<div id='root'/>

來源

2017-04-11 13:24:31

感謝您的幫助。我現在明白了這個想法。 –

你可以做Mayank所說的，但有另一種方法 - 使用箭頭函數。這樣，該函數將自動獲取類的實例的'this'。

它將如下所示。當然，你將不得不刪除原來的綁定。

class Reactapp extends React.Component{ 

sayMassage =() => { 
    console.log(this.props.children); 
} 

render(){ 

    return(
<div> 
<h3> Hello {this.props.word}</h3> 
<p><a href="#" onClick={this.sayMassage}>Click Me</a></p>; 
</div> 
); 
} 
} 

ReactDOM.render(
<div> 
    <Reactapp word="React">This is a ReactJS 15.5 Tutorial</Reactapp> 
</div>, 
document.getElementById('root') 
);

P.S.有一個在功能名稱的拼寫錯誤，sayMassage（應該是sayMessage），除非你真正想說的按摩:-)

來源

2017-04-11 13:28:42

謝謝隊友。它的工作，我misstyped這的確是消息:)不按摩 –

首先，刪除你行var sayMassage = this.sayMassage.bind(this);

它是在constructor，這樣：

constructor(){ 
    super(); 
    this.sayMassage = this.sayMassage.bind(this); 
}

或者打電話給你function並不必bind時保持上下文，您可以在鏈接使用arrow function，像這樣：

<a href="#" onClick={() => this.sayMassage}>Click Me</a>

來源

2017-04-11 13:31:20

一個選項，以解決您的作用域的問題是移動結合類的構造函數，像這樣：

constructor(props) { 
super(props); 
this.state = {...}; 

this.sayThaiMassage = this.sayThaiMassage.bind(this);

}

或使用脂肪箭頭功能，像這樣：

myFatGreekMassage = (event) => { 
    ...your code 
}

雖然胖箭頭功能保持範圍（這是），你的問題也解決了。

來源

2017-04-11 13:36:26

嘗試onClick={() => ::this.sayMassage}

，並刪除var sayMassage = this.sayMassage.bind(this);

::這裏進行綁定這與目前的範圍。

() =>箭頭函數聲明瞭一個函數，當你點擊元素時它將被執行。如果您沒有將該調用聲明爲函數，則每次重新加載頁面時都會執行該調用，而無需採取任何行動。

來源

2017-04-11 13:40:45 ansmonjol

ReactJS的onClick功能不起作用，類型錯誤：這是空

回答

相關問題