无法在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函数

回答

相关问题