解决React报错Expected `onClick` listener to be a function_F11 - 专业站长和开发者的学习网站

本站首页收藏本站

广告位联系

APP正在开发中...

返回顶部

收藏

分享到

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

JavaScript 来源：互联网作者：佚名发布时间：2022-12-04 10:57:48 人浏览

摘要

当我们为元素的onClick属性传递一个值，但是该值却不是函数时，会产生ExpectedonClicklistener to be a function报错。为了解决该报错，请确保只为元素的onClick属性传递函数。这里有个例子来展

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

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

1

2

3

4

5

6

7

8

9

10

11

// 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属性传递函数。

1

2

3

4

5

6

7

8

9

10

11

12

// App.js

const App = () => {

const handleClick = () => {

console.log('button clicked');

};

return (

<div>

<button onClick={handleClick}>Click</button>

</div>

);

};

export default App;

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

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

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

传递参数

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

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

// 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属性，这是非常重要的。因为如若这样的话，当页面加载时，该函数会被立即调用，这可能会导致无限的重新渲染循环。

版权声明 : 本文内容来源于互联网或用户自行发布贡献，该文观点仅代表原作者本人。本站仅提供信息存储空间服务和不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权，违法违规的内容，请发送邮件至2530232025#qq.cn(#换@)举报，一经查实，本站将立刻删除。

您可能感兴趣的文章 :

原文链接 : https://juejin.cn/post/7132845425647681572

Tag : React(38)

相关文章

JavaScript中字符串的常用方法总结

1.字符串长度 length属性返回字符串的长度： 1 2 var str = 字符串常用方法总结-东东吖; str.length; //13 2.查找字符串中的位置有三种查找字符串中
解决React报错Expected `onClick` listener to be a function

当我们为元素的onClick属性传递一个值，但是该值却不是函数时，会产生ExpectedonClicklistener to be a function报错。为了解决该报错，请确保只为元
ESLint规范TypeScript代码使用方法

ESLint 是一种 JavaScript linter，可以用来规范 JavaScript 或 TypeScript 代码，本文教你怎么在项目中快速把 ESLint 安排上。怎么写出优雅的代码是一
Vue屏幕自适应三种实现方法介绍

使用 scale-box 组件属性： width宽度默认1920 height高度默认1080 bgc背景颜色默认transparent delay自适应缩放防抖延迟时间（ms）默认100 vue2版本：
在web worker中使用fetch实例介绍

1.Web Worker意义由于 JS 是单线程的，费时的 JS 操作将会导致整个页面的阻塞。Web Worker 提供了创建多线程的方法，将一些耗时且 UI 无关的工
实时通信Socket io的使用介绍

最近在工作中，遇到了一个需求，需要和后台服务实时通信，获取各种设备的实时状态、以及对设备下发指令。后端这边选择了socket.io这个
js中如何对url进行编码和解码

js 对url进行编码和解码三种编码和解码函数 encodeURI和 decodeURI 它着眼于对整个URL进行编码，因此除了常见的符号以外，对其他一些在网址中
React RenderProps模式超详细介绍

render prop是一个技术概念。它指的是使用值为function类型的prop来实现React component之间的代码共享。如果一个组件有一个render属性，并且这个
Vue中ref、reactive、toRef、toRefs、$refs的基本用法总

一、ref reactive 1.1.为什么需要ref、reactive ??? setup函数中默认定义的变量并不是响应式的（即数据变了以后页面不会跟着变），如果想让变量变
Javascript如何实现对象扁平化实例介绍

数组扁平化相信大家已经耳熟能详了，在被面试官问到如何实现数组扁平化你就偷着乐吧，但是相信有不少大佬在面试一些国内顶尖的大厂

推荐阅读

最新更新

友情链接

免费视频教程

网页制作教程

易优cms模板

F11开发者网

本站所有内容来源于互联网或用户自行发布，本站仅提供信息存储空间服务，不拥有版权，不承担法律责任。如有侵犯您的权益，请您联系站长处理！
Copyright © 2017-2022 F11.CN All Rights Reserved. F11站长开发者网版权所有 | 苏ICP备2022031554号-1 | 51LA统计