脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript类库 → React → React报错onClick function

解决React报错Expected `onClick` listener to be a function

 更新时间：2022年12月02日 11:28:49   作者：Borislav Hadzhiev  
这篇文章主要为大家介绍了React报错Expected `onClick` listener to be a function解决，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪

总览

当我们为元素的onClick属性传递一个值，但是该值却不是函数时，会产生"Expected onClick listener to be a function"报错。为了解决该报错，请确保只为元素的onClick属性传递函数。

这里有个例子来展示错误是如何发生的。

// App.js
const App = () => {
  // ⛔️ Warning: Expected `onClick` listener to be a function
  // instead got a value of `string` type.
  return (
    <div>
      <button onClick="console.log('Click')">Click</button>
    </div>
  );
};
export default App;

当按钮的onClick属性的期望值是函数时，我们为其传递了一个字符串，从而导致了错误的产生。

传递函数

为了解决该报错，请确保只为元素的onClick属性传递函数。

// App.js
const App = () => {
  const handleClick = () => {
    console.log('button clicked');
  };
  return (
    <div>
      <button onClick={handleClick}>Click</button>
    </div>
  );
};
export default App;

我们向元素的onClick属性传递了一个函数，顺利的解决了这个错误。然而，注意到我们在向onClick属性传递函数时并没有调用该函数。

我们传递了函数的引用，而不是函数调用的结果。

如果传递了函数调用的结果，那么事件处理器将在页面加载时立即被调用，这不是我们想要的。

传递参数

你通常需要做的事情是向事件处理器传递一个参数。你可以通过使用一个内联箭头函数来做到这一点。

// App.js
import {useState} from 'react';
const App = () => {
  const [count, setCount] = useState(0);
  const handleClick = (event, num) => {
    console.log(event.target);
    console.log('button clicked');
    setCount(count + num);
  };
  return (
    <div>
      <h2>{count}</h2>
      <button onClick={event => handleClick(event, 100)}>Click</button>
    </div>
  );
};
export default App;

handleClick函数是用event对象和一个数字参数调用的。需要注意的是，我们没有向onClick属性传递调用handleClick函数的结果。

我们实际上是将一个函数传递给它，该函数以event对象为参数，并返回以event和数字100为参数的handleClick函数的调用结果。

不要把调用handleClick函数的结果传递给onClick属性，这是非常重要的。因为如若这样的话，当页面加载时，该函数会被立即调用，这可能会导致无限的重新渲染循环。

以上就是解决React报错Expected `onClick` listener to be a function的详细内容，更多关于React报错onClick function的资料请关注脚本之家其它相关文章！

您可能感兴趣的文章:

相关文章

  • react-native动态切换tab组件的方法

    react-native动态切换tab组件的方法

    在APP中免不了要使用tab组件,有的是tab切换,也有的是tab分类切换.这篇文章主要介绍了react-native动态切换tab组件的方法，非常具有实用价值，需要的朋友可以参考下
    2018-07-07
  • React中常用的Hook有哪些

    React中常用的Hook有哪些

    这篇文章主要介绍了react hooks实现原理,文中给大家介绍了useState dispatch 函数如何与其使用的 Function Component 进行绑定，节后实例代码给大家介绍的非常详细，需要的朋友可以参考下
    2023-01-01
  • react antd实现动态增减表单

    react antd实现动态增减表单

    antd是react流行的ui框架库，本文主要介绍了react antd实现动态增减表单，分享给大家，感兴趣的小伙伴们可以参考一下
    2021-06-06
  • 详解React中多种组件通信方式的实现

    详解React中多种组件通信方式的实现

    在React中,组件之间的通信是一个非常重要的话题,React提供了几种方式来实现跨组件通信,下面小编将详细讲讲其中几种通信方式,并提供实际的代码示例,需要的可以参考下
    2023-11-11
  • 详解Immutable及 React 中实践

    详解Immutable及 React 中实践

    Immutable 可以给 React 应用带来数十倍的提升，也有人说 Immutable 的引入是近期 JavaScript 中伟大的发明，因为同期 React 太火，它的光芒被掩盖了。这篇文章主要介绍了Immutable及 React 中的实践,需要的朋友可以参考下
    2018-03-03
  • React Native提供自动完成的下拉菜单的方法示例

    React Native提供自动完成的下拉菜单的方法示例

    这篇文章主要为大家介绍了React Native提供自动完成的下拉菜单的方法示例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
    2022-10-10
  • JS跨域解决方案react配置反向代理

    JS跨域解决方案react配置反向代理

    这篇文章主要为大家介绍了JS跨域解决方案react配置反向代理的示例内容详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步
    2021-11-11
  • react配置px转换rem的方法

    react配置px转换rem的方法

    这篇文章主要介绍了react配置px转换rem的方法,本文给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
    2021-04-04
  • React框架核心原理全面深入解析

    React框架核心原理全面深入解析

    React是前端开发每天都用的前端框架，自然要深入掌握它的原理。我用 React 也挺久了，这篇文章就来总结一下我对 react 原理的理解，有需要的朋友可以借鉴参考下，希望能够有所帮助
    2022-11-11
  • 在React项目中实现一个简单的锚点目录定位

    在React项目中实现一个简单的锚点目录定位

    锚点目录定位功能在长页面和文档类网站中非常常见,它可以让用户快速定位到页面中的某个章节,本文讲给大家介绍一下React项目中如何实现一个简单的锚点目录定位,文中有详细的实现代码,需要的朋友可以参考下
    2023-09-09

最新评论