无法在 React 中调用 onClick 函数答案

【问题标题】：Unable to call onClick function in React无法在 React 中调用 onClick 函数
【发布时间】：2017-01-30 03:36:14
【问题描述】：

我有一个名为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

我哪里出错了？这是一个简单的语法错误吗？还是我以错误的方式调用函数？

提前致谢。

【问题讨论】：

无状态的全部意义意味着没有this。当然没有thie.state，尤其是没有this.setState。无国籍对吧？将这些功能从父级传递下来。也应该是onClick={handleLikePlus} 而不是onClick={handlLikePlus()}。您传递的是函数引用，而不是调用函数的结果
天哪，这太愚蠢了... 。名字里有线索，对吧？ :) 所以，解决方案是从父母那里传递。知道它是一个函数 reference 而不是一个函数 call 也非常有用。谢谢！

标签： javascript function reactjs onclick typeerror

【解决方案1】：

您正在使用无状态组件，但您仍在尝试使用 setState() — 这不起作用。如果需要状态，请使用普通组件。

此外，如错误所示，handleLikePlus 无法从 this 访问，因为您的函数中没有 this。

【讨论】：