無法在React中調用onClick函數

Question

我有一個名為Likes的無狀態功能組件。 在其中，我有兩個函數： handleLikePlus()和handleLikeMinus() 。 單擊“ Likes組件中的向上或向下箭頭時，我想分別觸發它們中的每個。

這是我的組件的代碼

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

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

提前致謝。

Answer 1

您正在使用無狀態組件，但仍在嘗試使用setState() －這將無法工作。 如果需要狀態，請使用常規組件。

另外，如錯誤所示，無法從this訪問handleLikePlus ，因為函數內部沒有this 。