当前位置：首页 > news >正文

React中点击事件写法的注意（this、箭头函数）

news 来源：原创 2025/8/29 8:16:14

‌1、错误写法‌：onClick={this.acceptAlls()}

‌2、正确写法‌：onClick={this.acceptAlls}（不带括号）

总结

方案1：构造函数绑定

方案2：箭头函数包装方法（更简洁）

方案3：直接绑定 + 参数传递

方案的关键区别说明

在写代码时，看到别人写的点击事件，大家写法都不太一样，到底有什么需要注意的呢？

-----------需要注意 ‌正确的绑定方式‌ 和 ‌事件触发时机

‌1、错误写法‌：onClick={this.acceptAlls()}

原因：

这样写会‌立即执行‌ acceptAlls 函数，而不是在点击时执行。
括号 () 表示函数调用
组件渲染时就会执行 acceptAlls
onClick 实际上接收到的是 acceptAlls 的返回值（这里是 undefined），而不是函数本身
// 例如：错误的写法
class MyComponent extends React.Component {acceptAlls = () => {console.log("执行逻辑", this.props); //};
}<Button onClick={this.acceptAlls() }>保存</Button>
‌2、正确写法‌：onClick={this.acceptAlls}（不带括号）
// 改正后的：
class MyComponent extends React.Component {acceptAlls = () => {console.log("执行逻辑", this.props); //};
}<Button onClick={this.acceptAlls}>保存</Button>
总结

在 React 中，onClick 需要接收一个‌函数引用‌（即函数本身），而不是函数的执行结果

‌onClick={函数}‌：传递函数引用，点击时执行。
‌onClick={函数()}‌：立即执行函数，传递返回值（通常是无效的）。
这里 () => {...} 创建了一个新函数，点击时才会调用 acceptAlls(id)

方案1：构造函数绑定

<Button onClick={this.acceptAlls }>保存</Button>

上述写法的前提需要：this指向要明确（要么手动绑定、要么写成箭头函数）

class MyComponent extends React.Component {// 方式1：构造函数中绑定constructor(props) {super(props);this.acceptAlls = this.acceptAlls.bind(this);  // ！！！！！！}acceptAlls() {console.log("执行逻辑", this.props); // this 正确指向组件实例}<Button onClick={this.acceptAlls}>直接确认</Button >
}

或

class MyComponent extends React.Component {// 方式2：箭头函数自动绑定 thisacceptAlls = () => {console.log("执行逻辑", this.props); // this 始终正确};<Button onClick={this.acceptAlls}>直接确认</Button >
}

或

class MyComponent extends React.Component {constructor(props) {super(props);this.acceptAlls = this.acceptAlls.bind(this); // ✅ 正确绑定}acceptAlls(id) {console.log("执行ID:", id, this.props); // ✅ this 正确}render() {return (<Button onClick={() => this.acceptAlls(item.id)}>确认</Button>// ✅ 箭头函数传参 + 已绑定的方法);}
}

方案2：箭头函数包装方法（更简洁）
class MyComponent extends React.Component {// 箭头函数自动绑定 thisacceptAlls = (id) => {console.log("确认操作", id, this.props);};render() {return (<div>{/* 无参数 */}<Button onClick={this.acceptAlls}>直接确认</Button >{/* 有参数 */}// 需要传递额外参数时（如 id）：<Button onClick={() => this.acceptAlls(item.id)}>确认</Button></div>);}
}
注意：

箭头函数一定的性能影响‌，每次渲染都会创建新函数，可能影响性能（在循环或纯组件中慎用）‌

方案3：直接绑定 + 参数传递

class MyComponent extends React.Component {constructor(props) {super(props);this.acceptAlls = this.acceptAlls.bind(this);}acceptAlls(id) { /*...*/ }render() {return (<Button onClick={this.acceptAlls.bind(this, item.id)}>确认</Button>// ✅ bind 直接绑定参数（注意性能影响）);}
}

方案的关键区别说明

方案 this 绑定参数传递性能影响
构造函数绑定手动绑定需箭头函数传参最优
箭头函数方法自动绑定可箭头函数传参较优
直接bind传参手动绑定 bind直接传参较差（每次渲染新建函数）

最佳实践建议

‌优先使用方案2（箭头函数方法）‌：既解决this问题，又保持代码简洁
‌需要兼容旧代码时用方案1‌：显式绑定更易理解
‌避免在render中直接bind‌（方案3）：可能引发性能问题

方案	`this` 绑定	参数传递	性能影响
构造函数绑定	手动绑定	需箭头函数传参	最优
箭头函数方法	自动绑定	可箭头函数传参	较优
直接bind传参	手动绑定	bind直接传参	较差（每次渲染新建函数）

React中点击事件写法的注意（this、箭头函数）

目录 ‌1、错误写法‌：onClick{this.acceptAlls()} ‌2、正确写法‌：onClick{this.acceptAlls}（不带括号） 总结方案1：构造函数绑定方案2：箭头函数包装方法（更简洁） 方案3&am…...

编程日记 2025/8/29 8:16:14

DeepSeek AI大模型：中国智能时代的“争气机“-AI生成

DeepSeek AI大模型：中国智能时代的"争气机" 当全球科技巨头在万亿参数竞赛中你追我赶时，一家中国公司悄然改写了游戏规则。DeepSeek AI最新发布的"探月"大模型不仅以中英双语能力打破技术壁垒，更用"动态脑区"设…...

编程日记 2025/8/24 6:01:29

Java老鼠迷宫（递归）---案例来自韩顺平老师讲Java

题目： 粉色圈圈是启动，红色方框是阻挡，蓝色五角星是出口，走到出口，老鼠winner 代码： public class test6 {public static void main(String[] args){//创建二维数组int[][] map new int[8][7];// 最外围都…...

编程日记 2025/8/29 5:24:28

Python大数据视频教程

概述最新整理的Python大数据视频教程已出，需要学习的小伙伴抓紧了。课程亮点： ❶ 编程基石：从Python基础到高阶函数式编程，用代码驯服数据 ❷ 数据魔法：SQL进阶ETL实战，Pandas玩转百万级数据分析 ❸ 分…...

编程日记 2025/8/29 8:13:52

Java工厂模式解析：灵活对象创建的实践指南

精心整理了最新的面试资料和简历模板，有需要的可以自行获取点击前往百度网盘获取点击前往夸克网盘获取一、模式定义与分类工厂模式（Factory Pattern）是创建型设计模式的核心成员之一，主要解决对象创建过程中的灵活性问题。根…...

编程日记 2025/8/20 14:24:44

PDF转换格式失败？原因及解决方法全解析

在日常工作中，我们经常会遇到将PDF转换为Word、Excel、PPT等格式的需求。有时候以为一键转换就能搞掂，没想到却转换失败。到底问题出在哪？别急，我们可以看看是否以下几个问题引起的，找到解决问题的关键！ 原…...

编程日记 2025/8/28 9:44:19

《轨道力学讲义》——第五讲：摄动理论基础

第五讲：摄动理论基础引言在实际的航天任务中，我们很少能够使用理想的二体问题来精确描述航天器的运动。地球的非球形性、大气阻力、太阳辐射压以及第三天体引力等各种因素都会对航天器轨道产生偏离理想轨道的影响。这些额外的力被称为"摄动力&q…...

编程日记 2025/8/26 10:56:23

Question 1: What does the fixed lookup table in traditional NLP represent? A. A table of one‐hot vectors B. A table of pre‐trained dense word embeddings C. A dictionary of word definitions D. A table of n-gram counts Answer (中文): 答案选 B。传统NLP中“…...

编程日记 2025/8/29 0:09:11

C++核心机制-this 指针传递与内存布局分析

示例代码 #include<iostream> using namespace std;class A { public:int a;A() {printf("A:A()的this指针：%p!\n", this);}void funcA() {printf("A:funcA()的this指针：%p!\n", this);} };class B { public:int b;B() {prin…...

编程日记 2025/8/29 5:59:13

python asyncio 的基本使用

1、引言 asyncio 是 Python 标准库中的一个库，提供了对异步 I/O 、事件循环、协程和任务等异步编程模型的支持。 asyncio 文档 2、进程、线程、协程线程线程是操作系统调度的基本单位，同一个进程中的多个线程共享相同的内存空间。线程之间的切换由操…...

编程日记 2025/8/29 8:13:53

大模型中提到的分词器是什么

分词器在大模型中的核心解析 1. 分词器的定义与基本作用分词器（Tokenizer）是自然语言处理（NLP）中的核心组件，负责将原始文本拆分为模型可处理的离散单元（称为Token）。其核心功能包括：文本离散化：将连续字符序列转化为数字序列，作为模型的输入。语义单元提取：通过…...

编程日记 2025/8/29 8:10:50

Android中使用BuildConfig.DEBUG无法找到的解决方法

BuildConfig是Android构建工具自动生成的一个类，通常位于应用的包名下，包含一些构建相关的常量，比如DEBUG标志、应用ID、版本信息等。遇到的问题可能有几种情况。首先，可能项目没有正确构建，导致BuildConfig没有被生…...

编程日记 2025/8/28 5:07:16

Python（14）Python内置函数完全指南：从基础使用到高阶技巧

目录背景介绍一、内置函数全景分类1. 数据类型转换（15个）2. 数学运算（12个）3. 迭代处理（9个）4. 对象操作（11个）5. 输入输出（4个） 二、高阶函数应用场景1. en…...

编程日记 2025/8/27 15:22:21

echo命令，tail命令，反引号，重定向符

echo命令： 作用：在命令行中输出指定的内容，相当于print语句语法：echo 指定的内容（当内容包含空格和特殊字符的时候，语句很复杂的时候，最好用双引号括起来） tail命令：…...

编程日记 2025/8/29 1:14:05

集成学习介绍

集成学习（Ensemble Learning）是一种机器学习范式，它通过组合多个模型的预测来提高整体模型的性能。单一模型可能在某些方面表现不佳或具有较高的偏差或方差，而集成方法能够通过结合多个模型的优点来克服这些问题，从而提…...

编程日记 2025/8/22 16:01:46

【CUDA】ubuntu环境下安装cuda

写在前面软硬件匹配问题 ：如老显卡安装ubuntu24, 会发现适合显卡的cuda不适合ubuntu24, 适合ubuntu24的cuda不适合显卡，因此安装ubuntu系统前，务必查明 ：当前设备的显卡支持的cuda，支持哪些ubuntu版本下面的三个问题…...

编程日记 2025/8/28 4:11:28

进程间通信-信号量

消息队列（Message Queue）是一种在不同组件或进程间进行异步通信的机制，它允许应用程序以松耦合的方式交换消息。消息队列就像一个缓冲区，发送者将消息放入队列，接收者从队列中取出消息进行处理。以下为你详细介绍消息队…...

编程日记 2025/8/24 18:59:29

Ubuntu 22.04安装MySQL ： Qwen2.5 模型对话数据收集与微调教程

在Ubuntu 22.04安装MySQL的教程请点击下方链接进行参考：点击这里获取MySQL安装教程今天将为大家带来如何微调Qwen2.5模型并连接数据库进行对话的教程。快跟着小编一起试试吧~ 1 大模型 Qwen2.5 微调步骤 1.1 从 github 仓库克隆项目克隆存储库：#拉取代码 git clo…...

编程日记 2025/8/28 1:32:07

L1-8 新年烟花

单位杭州百腾教育科技有限公司新年来临，许多地方会举行烟花庆典庆祝。小 C 也想参加庆典，但不幸的是跟他一个想法的人实在太多，活动场地全是人人人人人人人人人…… 活动场地可视作一个 NM 的矩阵，其中有一些格子是空的&#…...

编程日记 2025/8/23 16:11:21

OpenCV中的轮廓检测方法详解

文章目录引言一、什么是轮廓？二、OpenCV中的轮廓检测基础1. 基本步骤2. findContours函数详解三、轮廓检索模式四、轮廓近似方法五、轮廓特征分析1. 轮廓面积2. 轮廓周长/弧长3. 轮廓近似（多边形拟合）4. 凸包5. 边界矩形6. 最小闭合圆7. 拟…...

编程日记 2025/8/26 7:13:24

AIP-231 批量方法：Get

编号231原文链接AIP-231: Batch methods: Get状态批准创建日期2019-06-18更新日期2019-06-18 一些API允许用户获取一组特定资源在一个时间点（例如使用读事务）的状态。批量获取方法提供了这个功能。指南 API 可以按照以下模式支持批量获取&#xff1…...

编程日记 2025/8/22 3:54:38

人工智能基础-matplotlib基础

绘制图形 import numpy as np x np.linspace(0, 10, 100) y np.sin(x) import matplotlib as mpl import matplotlib.pyplot as plt plt.plot(x, y) plt.show()绘制多条曲线 siny y.copy() cosy np.cos(x) plt.plot(x, siny) plt.plot(x, cosy) plt.show()设置线条颜色 …...

编程日记 2025/8/23 18:09:43

qt运行时报段错误

标题： qt运行时报段错误，查看stack，显示： 原因报错的cpp文件新包含一个头文件，这个头文件里的pack指令有问题，如下: 解决办法修改为正确的pack指令。...

编程日记 2025/8/22 4:49:30

【Qt】Qt Creator开发基础：项目创建、界面解析与核心概念入门

🍑个人主页：Jupiter. 🚀 所属专栏：QT 欢迎大家点赞收藏评论😊 目录 Qt Creator 新建项⽬认识 Qt Creator 界⾯项⽬⽂件解析Qt 编程注意事项认识对象模型（对象树）Qt 窗⼝坐标体系 Qt Creator 新…...

编程日记 2025/8/27 13:14:19

CAP应用

1.工作原理 CAP（Consistent，Available，Partition - tolerant）框架在.NET 中的工作原理。CAP 是一个用于.NET 的分布式事务解决方案，主要用于实现微服务架构中的数据一致性（实现分布式事务的最终一致性&…...

编程日记 2025/8/22 21:42:35

典型操作系统内核架构

在典型操作系统架构（如下图所示）中，内核负责以安全、公平的方式为多个应用程序管理和共享硬件资源。内核通过一组 API（即系统调用）向应用程序提供服务。这些 API 不同于常规库函数，因其是用户模式到内核模…...

编程日记 2025/8/29 7:54:27

AWS Redshift的使用场景及一些常见问题

Redshift 不是关系型数据库, 提供了Amazon Redshift Serverless 和 Amazon Redshift 都是构建于 Redshift 数仓引擎之上的，但它们适用的场景不同。Redshift和Dynamodb都可以存储数据, 分别怎么选择? 这里记录一些常见的问题和场景。 1. 如何选择用Amazon Redshift…...

编程日记 2025/8/29 5:38:34

searchProperties 是什么，python中是什么：解包字典的操作符

searchProperties 是什么，python中是什么：解包字典的操作符在 Python 中，** 是用于解包字典的操作符，**searchProperties 是一个可变关键字参数。它允许函数接受任意数量的关键字参数，这些参数会被收集到一个字典中，字典的键是参数名，值是参数对应的值。在 ButtonCon…...

编程日记 2025/8/28 0:56:30

.NET MCP 文档

MCP 概述 MCP（Model Context Protocol）是由 Anthropic 推出的一种开放协议，类似 AI 的 USB-C 扩展坞，用于在大模型和数据源之间建立安全的通信（授权），让 AI 应用能够安全地访问和操作本地或远程…...

编程日记 2025/8/29 0:55:05

07软件测试需求分析案例-修改用户信息

修改用户信息是后台管理菜单的一个功能模块，只有admin才有修改权限。包括查询用户名进行显示用户相关信息，并且修改用户相关信息的功能。 1.1 通读文档通读需求规格说明书是提取信息，提出问题，输出具有逻辑、规则、流程的业务…...

编程日记 2025/8/24 9:37:50

第九届“创客中国”中小企业创新创业大赛总决赛企业组三等奖项目—基于AI智能代码疫苗技术的数字供应链安全解决方案

项目名称：基于AI智能代码疫苗技术的数字供应链安全解决方案企业名称：北京安普诺信息技术有限公司(悬镜安全） 项目简介： ‍‍‍‍‍ 基于AI智能代码疫苗技术的数字供应链安全解决方案，悬镜安全在全球范围内首创…...

编程日记 2025/8/22 11:01:38

企业级RAG行业应用落地方案——阿里云百炼

行业痛点分析这张图主要围绕“行业痛点锚定”展开，通过雷达图和表格结合的方式，分析电商选品在不同维度下的情况： 分析对象：聚焦电商选品。维度展示：从可结构化程度、重复性、数据可得性、人机互动性、AI带来的价值这…...

编程日记 2025/8/25 0:26:38

Mac切换node版本

Mac切换node版本 1.首先安装n模块： sudo npm install -g n 2.升级node.js到最新稳定版 sudo n stable 3.升级到最新版 sudo n latest 4.n后面也可以跟随版本号,升级到任意版本 sudo n v0.10.26或sudo n 0.10.26 5.切换使用版本 sudo n 7.10.0 6.删除制定版本…...

编程日记 2025/8/23 9:43:42

从零开始学A2A一：A2A 协议概述与核心概念

A2A 协议概述与核心概念学习目标基础理解掌握A2A协议的基本概念和背景理解协议的设计原则和核心思想了解协议在AI领域的重要性技术掌握熟悉A2A协议的核心功能组件掌握能力发现和任务管理机制理解多模态交互和安全通信原则实践应用能够设计基于A2A的智能体系统掌握协议…...

编程日记 2025/8/23 23:53:51

科普：如何通过ROC曲线，确定二分类的“理论阈值”

在二分类问题中，已知预测概率（如逻辑回归、神经网络输出的概率值）时，阈值的选择直接影响分类结果（正/负样本判定）。一、实践中的阈值选择方法 1. 基于业务目标的调整最大化准确率：适用于样…...

编程日记 2025/8/28 3:15:45

Cherry Studio + MCP，从0到1保姆教程，3个场景体验

📺 详细操作以视频方式呈现，视频地址周五会更新出来 💯 鉴于很多观众网络环境受限，文末提供所需安装文件网盘分享 💬 什么是 MCP ？ MCP（Model Context Protocol，MCP）模型…...

编程日记 2025/8/24 20:55:56

Docker学习笔记-docker安装、删除

一、在centOS 7中docker的默认安装目录 # Docker 主配置文件目录 ls /etc/docker# Docker 数据目录（镜像、容器、卷等） ls /var/lib/docker# Docker 可执行文件路径 which docker # 输出类似 /usr/bin/docker 二、docker文件目录说明目录/文件用途/…...

编程日记 2025/8/25 3:41:40

visual studio 常用的快捷键（已经熟悉的就不记录了）

以下是 Visual Studio 中最常用的快捷键分类整理，涵盖代码编辑、调试、导航等核心场景： 一、生成与编译生成解决方案 Ctrl Shift B 一键编译整个解决方案，检查编译错误（最核心的生成操作）编译当前文件 Ctrl F…...

编程日记 2025/8/23 23:21:24

使用人工智能大模型腾讯元宝，如何做课题研究？

今天我们学习使用人工智能大模型腾讯元宝，如何做课题研究？ 手把手学习视频地址：https://edu.csdn.net/learn/40402/666424 在腾讯元宝对话框中输入如何协助老师做课题（申报书、开题报告、中期报告、结题报告）&#x…...

编程日记 2025/8/27 12:52:08

开源模型应用落地-模型上下文协议（MCP）-第三方MCP Server实战指南（五）

一、前言在AI技术高速发展的2025年，如何让大语言模型（LLM）更灵活地调用外部工具与数据，成为开发者关注的焦点。模型上下文协议（MCP）作为AI与外部资源的“万能接口”，通过标准化交互框架解决了传统集成中的碎片化问题。而第三方MCP Server的引入，进一步降低了开发门…...

编程日记 2025/8/28 12:48:22

python每日一练

题目一输入10个整数,输出其中不同的数,即如果一个数出现了多次,只输出一次(要求按照每一个不同的数第一次出现的顺序输出)。解题错误题解 a list(map(int,input().split())) b [] b.append(a[i]) for i in range(2,11):if a[i] not in b:b.append(a[i]) print(b)但是会…...

编程日记 2025/8/29 6:51:31

跨境贸易之常见的贸易术语

外贸出口中经常会听到FOB、CIF、DDP各种术语，这些都是什么意思呢？ 今天我们来介绍一下他们的确切含义。一般来说你听到的这些话语都是表示交货的方式。如果普通的贸易过程大家一听就明白的，就是货到付款，款到发货，支…...

编程日记 2025/8/27 15:22:01

KingbaseES之KDts迁移SQLServer

项目适配迁移SQLServer至金仓,今天写写KDts-WEB版迁移工具迁移SQLServer至KingbaseES的步骤,以及迁移注意事项. SQLServer版本:SQLServer2012 KingbaseES版本:V009R004C011(SQLServer兼容版) --1.进入数据库客户端工具KDTS工具目录，启动KDts服务： [king…...

编程日记 2025/8/28 5:03:42

Rust编程学习（一）: 变量与数据类型

我们先从Rust基本的变量声明定义与数据类型开始学习，了解这门语言基本特性。 1 变量与可变性变量声明变量声明以let关键字开头，x为变量名，变量名后紧跟冒号和数据类型,但是rust编译器有自动推导变量类型的功能，可以省略显式的声…...

编程日记 2025/8/24 10:14:56

Java 在人工智能领域的突围：从企业级架构到边缘计算的技术革新

一、Java AI 的底层逻辑：从语言特性到生态重构在 Python 占据 AI 开发主导地位的当下，Java 正通过技术重构实现突围。作为拥有 30 年企业级开发经验的编程语言，Java 的核心优势在于强类型安全、内存管理能力和分布式系统支持，这…...

编程日记 2025/8/26 4:26:29

[极客大挑战 2019]HardSQL1

打开网页，貌似存在SLQ注入，尝试闭合单引号才生报错信息，但是尝试联合注入不出意外应该是被过滤了，没法使用，可以考虑一下报错注入这里可以使用字典爆破一下，利用页面返回情况，看看哪些关键词…...

编程日记 2025/8/29 0:21:44

深入剖析C++中 String 类的模拟实现

目录引言一、基础框架搭建成员变量与基本构造函数析构函数二、拷贝与赋值操作深拷贝的拷贝构造函数赋值运算符重载三、字符串操作功能实现获取字符串长度字符串拼接字符串比较字符访问四、迭代器相关实现（简单模拟） 迭代器类型…...

编程日记 2025/8/23 22:17:36

KWDB创作者计划— KWDB技术范式革命：从数据存储到认知进化的架构跃迁

引言：数据库的认知觉醒在AIoT设备数量突破万亿、边缘计算节点算力总和超越云端的2025年，传统数据库的"存储-计算"二元结构正面临认知维度缺失的困境。当工业数字孪生需要实时推演百万设备状态，城市大脑需处理多模态时空数据时&…...

编程日记 2025/8/27 12:33:17

【后端开发】Spring配置文件

文章目录配置文件properties配置文件基本语法读取配置文件 yml配置文件基本语法读取配置文件配置空字符串及null单双引号配置对象配置集合配置Map 优缺点优点缺点配置文件硬编码是将数据直接嵌入到程序或其他可执行对象的源代码中，也就是常说的"代码写死&q…...

编程日记 2025/8/23 18:34:18

探讨HMI（人机界面）设计原则，如何通过优秀的设计提升操作效率和用户体验

在物联网与人工智能深度渗透的今天，人机界面（Human-Machine Interface, HMI）已成为连接数字世界与物理世界的神经末梢。优秀的HMI设计不仅关乎视觉美感，更是认知工程、信息架构与交互范式的协同创新。本文从神经认知科学原理出发&…...

编程日记 2025/8/25 6:56:41

‌1、错误写法‌：onClick={this.acceptAlls()}

‌2、正确写法‌：onClick={this.acceptAlls}（不带括号）

总结

方案1：构造函数绑定

方案2：箭头函数包装方法（更简洁）

方案3：直接绑定 + 参数传递

方案的关键区别说明

相关文章：

‌1、错误写法‌：`onClick={this.acceptAlls()}`

‌2、正确写法‌：`onClick={this.acceptAlls}`（不带括号）