無法在React中調用onClick函數

我有一個稱爲Likes的無狀態功能組件。在它內部，我有兩個功能：handleLikePlus()和handleLikeMinus()。點擊Likes組件中的向上或向下箭頭時，我想分別觸發它們中的每一個。無法在React中調用onClick函數

下面是代碼爲我的組件

function Likes({likes}) { 
    function handleLikePlus() { 
     this.setState({ 
     likes: this.state.likes + 1 
     }); 
    }; 
    function handleLikeMinus() { 
     this.setState({ 
     likes: this.state.likes - 1 
     }); 
    }; 
    return (
     <div> 
     <div onClick={this.handleLikePlus()}> 
      <h5><i className="fa fa-arrow-up" aria-hidden="true"></i></h5> 
     </div> 
     <div> 
      <h4>{likes}</h4> 
     </div> 
     <div onClick={this.handleLikeMinus()}> 
      <h5><i className="fa fa-arrow-down" aria-hidden="true"></i></h5> 
     </div> 
     </div> 
    ); 
}

我的控制檯回報：

Uncaught TypeError: cannot read property 'handleLikePlus' of undefined

我要去哪裏錯了？這是一個簡單的語法錯誤？還是我以錯誤的方式調用函數？

在此先感謝。

來源

2016-09-21 Paulos3000

無狀態意味着沒有'this'這一點。當然不會有'thie.state'，尤其是'this.setState'。無狀態的權利？從父母傳遞這些功能。也應該是'onClick = {handleLikePlus}''onClick = {handlLikePlus（）}'。你傳遞函數引用，而不是調用函數的結果 – azium

哦，那個男人，那真是愚蠢...... 。 Clue的名字，對吧？ :)所以，解決方案是從父母傳遞它。知道它是一個函數**引用**而非函數**調用**也非常有用。謝謝！ – Paulos3000

你正在使用無狀態組件，但你仍然試圖使用setState() - 這是行不通的。如果您需要狀態，請使用正常組件。

另外，由於錯誤讀取，handleLikePlus無法從this訪問，因爲函數內部沒有this。

來源

2016-09-21 18:40:07 tobiasandersen

如上...謝謝:) – Paulos3000

無法在React中調用onClick函數

回答

相關問題