react中onclick_在React js中调试onclick事件的问题

最新推荐文章于 2022-07-26 22:36:15 发布
最新推荐文章于 2022-07-26 22:36:15 发布
阅读量820 收藏 1
点赞数 1
文章标签： react python
原文链接：https://medium.com/@merxplat/debugging-a-problem-with-an-onclick-event-in-react-js-8096d6c28c8c
版权

react中onclick

A handleClick event wasn’t behaving like I expected it to behave. I replaced everything inside it with a console.log to make it easier to tell what was going on.

handleClick事件的行为不像我预期的那样。 我用console.log替换了其中的所有内容，以便更轻松地知道发生了什么。

When the component loaded, the event fired many times.

加载组件后，该事件将触发多次。

Image for post
💩💩💩💩💩💩💩💩💩
💩💩💩💩💩💩💩💩💩

This indicated to me that the function was being run many times when the component was loaded.

这向我表明该函数在加载组件时正在运行多次。

If the function was not running at all, I would have put thiss on things until it worked. Because it was running too many times, I removed () s until it worked.

如果函数不是在所有运行，我将不得不把this S于事，直到它的工作。 因为它运行了太多次，所以我删除了()直到起作用。

Image for post

Now it only poop s when I click on the div. Success.

现在，只有当我单击div时，它才会poop 。 成功。

Image for post
💩🎉
💩🎉

What are your best tips and tricks for debugging React?

您调试React的最佳秘诀是什么？

翻译自: https://medium.com/@merxplat/debugging-a-problem-with-an-onclick-event-in-react-js-8096d6c28c8c

react中onclick

weixin_26723981
关注
  • 1
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
React中阻止事件冒泡的问题详析
10-17
这在很多情况下非常有用，但有时也会带来不便，特别是当你只希望事件在触发元素上被处理，而不是继续向上冒泡时。 在原生JavaScript中，可以通过调用事件对象的`stopPropagation()`方法来阻止事件继续冒泡。该方法...
react中onClick点击事件
x1037490413的博客
04-06 5628
react中onClick点击事件里的函数必须是箭头函数，不能在onClick{}括号里直接调用函数，不然相当于onClick{调用完的值}，根本不会有效了，所以有这几种写法 1. 2. 3.
React 绑定 onClick 事件不生效问题分析，原来是绑定方法二不归！初学需注意
本博客纯属个人网络笔记，如对阁下有用，甚喜；否则，关掉即可，不喜勿喷。专心写代码，不做键盘侠！
07-24 5448
复制粘贴的代码，没经过测试，你敢提交吗？是的，复制代码，如果觉得很简单，不想启动环境测试的话，最好的方法是目测，然后 SVN 比对分析，看看改了什么，有没有改完整。从以往的经验来看，无论复制什么代码，只要心里感觉太简单，有所松懈，就可能有坑！ ..................
reactjs onClick绑定点击事件的正确写法
学亮编程手记
07-26 423
reactjs onClick绑定点击事件的正确写法
react中使用map时onClick事件无效问题
大风起兮云飞扬
02-21 2793
React中的一些坑 今天做一个列表渲染，然后通过单击某一项，进入对应的详情页面。但是在使用map的时候，onClick无效并且出现了一些异常现象，话不多说，看图： 一开始我的li是这样写的： 并且，改变this指向,如图 然后，我在函数里打印了一下： 结果给我把数据像是用了map一样，直接映射了出来，但重点是我还没有点击，也就是还没触发这个函数。 解决办法： 其实解决办法也很简单，这需要...
在React中如何优雅的处理事件响应详解
12-11
在React中，处理事件响应是构建用户界面的关键部分，它使得用户与应用程序进行交互成为可能。React提供了多种处理事件响应的方法，确保了代码的灵活性和可维护性。这里我们将详细探讨三种常见的方式。 首先，我们...
18.1 01_react_basics_javascript_
10-02
在React中，事件处理函数的写法与常规HTML略有不同，需要将函数绑定到事件处理属性，如`onClick`： ```jsx <button onClick={handleClick}>Click me ``` 8. **状态管理和状态提升** 对于跨组件的状态共享，...
react-fastclick：React的快速触摸事件
02-03
在创建任何组件之前，请在主javascript文件中初始化react-fastclick ，然后完成。 现在，对onClick或具有特殊功能的元素（例如输入）的任何调用都将自动添加快速触摸事件-无需编写任何其他侦听器。 ES6 import ...
JS中的事件委托
qq_33203555的博客
10-27 255
事件委托利用事件冒泡，只指定一个事件处理程序，就可以管理某一类型的所有事件。这有效地解决了以下问题： 1、事件处理程序过多的问题。 2、dom元素移除而事件处理程序未垃圾回收，导致性能变差。 3、新增的dom元素需要重新绑定事件处理程序。 如果我们不采用事件委托，很可能像如下这样绑定事件处理程序：<ul id="menu"> <li class='item'>1</li>
从零开始学前端 - 33. JS事件详解
qq_39506551的博客
10-14 316
从零开始学前端 - 33. JS事件详解 三、事件流 3.1 事件冒泡 3.2 事件捕获 四、事件对象 五、事件委托 事件流指的就是事件发生的执行顺序，`DOM2级事件` 规定的事件流包括三个阶段：**事件捕获阶段**、**处于目标阶段** 和 **事件冒泡阶段**。首先开始的是事件捕获阶段，可以在这一阶段对事件进行拦截和限制。然后实际的目标接收到事件，最后开始的是事件冒泡阶段，一般我们都是在这个阶段对事件做相应的处理。
react onClick 事件的两种写法
热门推荐
一个在全能之路上越走越远的男人。
03-13 1万+
// 第一种写法 export default class Header extends React.Component { show = () => { } render() { return ( <div onClick={this.show}></div> ) ...
React中onclick的正确用法
举个锤子的博客
07-22 2211
React开发中有时会遇到onclick事件点击不生效但渲染页面时自动触发的问题 原写法： this.columns_message = [ { title: '消息列表', dataIndex: 'message', render: text => { text = text.split('&&'); return <a href={text[1]} target='_blan
React js onClick无法将值传递给方法
xfxf996的博客
04-23 292
I want to read the onClick event value properties. 我想阅读onClick事件值属性。 But when I click on it, I see
JavaScript事件委托------JavaScript学习之路7
dragoned_123的博客
07-16 182
JavaScript事件委托 介绍 当我们为每个标签添加点击事件的时候： for(var i = 0;i<lss.length;i++){ lss[i].onclick = function(){ lss[i].style.color = "red";//添加点击事件使得文字的颜色为红色 } } 此时的每一个标签相当于有自己的一个点击事件函数，这样大大浪费了资源，没有共享，而且当在for循环结束后再添加新的标签，这些标签不会有颜色变红的效果。 所以事件委托就相当于每
React onClick点击事件传参三种写法
weixin_45936275的博客
03-09 3049
第一种 用bind绑定，调用是作为第二个参数传递，不用显示传递事件对象，定义方法时，事件对象作为最后一个参数传入 class Test extends React.Component{ constructor(props){ super(props) } render(){ return( <button onClick={this.getParame...
react中从表格外部onClick获取当前table的所有数据
最新发布
05-27
要从表格外部的`onClick`事件中获取当前表格的所有数据，可以采用以下步骤： 1. 在表格组件中，创建一个`ref`引用，用于获取表格的DOM节点： ```jsx import React, { useRef } from "react"; function Table() { const tableRef = useRef(null); return ( <table ref={tableRef}> {/* 表格内容 */} </table> ); } ``` 2. 在点击事件处理函数中，通过`tableRef.current`获取表格DOM节点，再通过`querySelectorAll`方法获取所有的`<tr>`元素： ```jsx function handleClick() { const rows = tableRef.current.querySelectorAll("tr"); console.log(rows); } function Table() { const tableRef = useRef(null); return ( <div> <button onClick={handleClick}>获取表格数据</button> <table ref={tableRef}> {/* 表格内容 */} </table> </div> ); } ``` 3. 遍历`<tr>`元素，获取每行的数据： ```jsx function handleClick() { const rows = tableRef.current.querySelectorAll("tr"); const data = []; rows.forEach((row) => { const rowData = []; row.querySelectorAll("td").forEach((cell) => { rowData.push(cell.textContent); }); data.push(rowData); }); console.log(data); } ``` 完整代码如下： ```jsx import React, { useRef } from "react"; function Table() { const tableRef = useRef(null); function handleClick() { const rows = tableRef.current.querySelectorAll("tr"); const data = []; rows.forEach((row) => { const rowData = []; row.querySelectorAll("td").forEach((cell) => { rowData.push(cell.textContent); }); data.push(rowData); }); console.log(data); } return ( <div> <button onClick={handleClick}>获取表格数据</button> <table ref={tableRef}> <thead> <tr> <th>姓名</th> <th>年龄</th> </tr> </thead> <tbody> <tr> <td>张三</td> <td>20</td> </tr> <tr> <td>李四</td> <td>25</td> </tr> </tbody> </table> </div> ); } ```
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值