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

React - 事件绑定this

在 React 中,this 的绑定是一个常见问题,尤其在类组件中使用事件处理函数时。JavaScript 中的 bind 函数用于设置函数调用时 this 的值。

bind 函数的作用

  • bind() 方法创建一个新的函数,当被调用时,其 this 关键字被设置为提供的值。
  • 另外,bind 还可以预设参数,这常用于部分应用的场景。

在 React 中的应用

在使用 React 的类组件时,事件处理函数通常需要正确绑定 this,以确保 this 指向组件实例。以下是一种常见的实现方式:

1. 在构造函数中绑定
import React, { Component } from "react";export default class Test extends Component{constructor(props) {super(props)// 初始化状态this.state = { isHot: false }// 解决 changeWeather中 this 指向问题this.changeWeather = this.changeWeather.bind(this)}render() {// 读取状态const {isHot} = this.statereturn (<h1 onClick={this.changeWeather}>今天天气很{isHot?'炎热':'凉爽'}</h1>)}changeWeather() {// changeWeather 放在 Weather 的原型对象上,供实例使用// 由于 changeWeather 是作为 onClick 的回调,所以不是通过实例调用的,是直接调用// 类中的方法默认开启了局部的严格模式,所以 changeWeather 中的this 是 undefined// 获取原来的 isHot 值const isHot = this.state.isHot// 严重注意:状态必须通过 setState 进行更新 this.setState({isHot:!isHot})}
}

2. 使用箭头函数
import React, { Component } from "react";export default class Test extends Component{constructor(props) {super(props)// 初始化状态this.state = { isHot: false }// 解决 changeWeather中 this 指向问题// this.changeWeather = this.changeWeather.bind(this)}render() {// 读取状态const {isHot} = this.statereturn (<h1 onClick={this.changeWeather}>今天天气很{isHot?'炎热':'凉爽'}</h1>)}changeWeather = () => {// changeWeather 放在 Weather 的原型对象上,供实例使用// 由于 changeWeather 是作为 onClick 的回调,所以不是通过实例调用的,是直接调用// 类中的方法默认开启了局部的严格模式,所以 changeWeather 中的this 是 undefined// 获取原来的 isHot 值const isHot = this.state.isHot// 严重注意:状态必须通过 setState 进行更新 this.setState({isHot:!isHot})}
}

总结

  • bind 方法用于明确设置函数调用时 this 的值,避免在事件处理程序中 this 指向错误。
  • 在 React 中,有多种方式处理 this 的绑定,主要包括在构造函数中绑定和使用箭头函数。
  • 对于大型组件或频繁更新的组件,推荐在构造函数中绑定 this,或者使用类属性定义箭头函数,以减少不必要的性能开销。

代码简写形式:

import React, { Component } from "react";export default class Test extends Component{// 初始化状态state = { isHot: false,wind:'微风' }render() {const {isHot,wind} = this.statereturn (<h1 onClick={() => this.changeWeather()}>今天天气很{isHot ? '炎热' : '凉爽'},{wind}</h1>)}changeWeather=()=>{const isHot = this.state.isHotthis.setState({isHot:!isHot})}
}

相关文章:

React - 事件绑定this

在 React 中&#xff0c;this 的绑定是一个常见问题&#xff0c;尤其在类组件中使用事件处理函数时。JavaScript 中的 bind 函数用于设置函数调用时 this 的值。 bind 函数的作用 bind() 方法创建一个新的函数&#xff0c;当被调用时&#xff0c;其 this 关键字被设置为提供的…...

【3.Git与Github的历史和区别】

目录 Git的历史和Github的区别本质和功能 Git的历史和Github的区别 Git是由Linux内核的创造者Linus Torvalds于2005年创建的。当时&#xff0c;Linux内核开源项目使用BitKeeper作为版本控制系统&#xff0c;但2005年BitKeeper的商业公司终止了与Linux社区的合作&#xff0c;收…...

【设计模式】【行为型模式】职责链模式(Chain of Responsibility)

&#x1f44b;hi&#xff0c;我不是一名外包公司的员工&#xff0c;也不会偷吃茶水间的零食&#xff0c;我的梦想是能写高端CRUD &#x1f525; 2025本人正在沉淀中… 博客更新速度 &#x1f4eb; 欢迎V&#xff1a; flzjcsg2&#xff0c;我们共同讨论Java深渊的奥秘 &#x1f…...

【算法学习】二分查找开区间写法总结

根据灵神教学中的二分查找开区间写法进行如下总结&#xff1a; 我们需要注意的是&#xff0c;lowerBound 模板求解的是 > target 的最小下标 private int lowerBound(int[] nums, int target) {int left -1;int right nums.length; // 开区间 (left, right)while (left …...

信息科技伦理与道德3-2:智能决策

2.2 智能推荐 推荐算法介绍 推荐系统&#xff1a;猜你喜欢 https://blog.csdn.net/search_129_hr/article/details/120468187 推荐系统–矩阵分解 https://blog.csdn.net/search_129_hr/article/details/121598087 案例一&#xff1a;YouTube推荐算法向儿童推荐不适宜视频 …...

【干活分享】2025年可以免费问答的一些GPT网站-deepseek等免费gpt

2025年已经到来&#xff0c;大家也都陆续回归到忙碌的工作中。在新的一年里&#xff0c;如何更高效地完成工作任务&#xff0c;提升工作效率&#xff0c;是很多人关心的问题。今天&#xff0c;就为大家分享一些实用性很强的GPT网站&#xff0c;帮助大家在工作中事半功倍。 Dee…...

webpack配置之---入口

entry 单入口 由于一般的单页面项目只有一个入口&#xff0c;也就是单入口&#xff0c;单入口的配置方式有以下三种方式&#xff0c;如果有遗漏的欢迎补充 1、字符串方式 以下这几行代码解释&#xff1a; entry&#xff1a;本项目的入口文件 output&#xff1a;本项目打包…...

Golang GORM系列:GORM CRUM操作实战

在数据库管理中&#xff0c;CRUD操作是应用程序的主干&#xff0c;支持数据的创建、检索、更新和删除。强大的Go对象关系映射库GORM通过抽象SQL语句的复杂性&#xff0c;使这些操作变得轻而易举。本文是掌握使用GORM进行CRUD操作的全面指南&#xff0c;提供了在Go应用程序中有效…...

[M模拟] lc380. O(1) 时间插入、删除和获取随机元素(模拟+数据结构+脑筋急转弯+数组快捷删除技巧+项目思考)

文章目录 1. 题目来源2. 题目解析 1. 题目来源 链接&#xff1a;380. O(1) 时间插入、删除和获取随机元素 题单&#xff1a; 待补充 2. 题目解析 其实这个题目抽象一下的话在项目中也能出现&#xff0c;可能日常项目中没有算法基础的话&#xff0c;就很容易直接去进行新内…...

30~32.ppt

目录 30.导游小姚-介绍首都北京❗ 题目​ 解析 31.小张-旅游产品推广文章 题目 解析 32.小李-水的知识❗ 题目​ 解析 30.导游小姚-介绍首都北京❗ 题目 解析 新建幻灯片-从大纲-重置-检查设计→主题对话框→浏览主题&#xff1a;考生文件夹&#xff08;注意&#x…...

一键查看电脑各硬件详细信息 轻松查看电脑硬件参数

今天为大家推荐两款非常实用的电脑硬件查看软件&#xff0c;它们能够一键快速查看电脑的各种配置信息&#xff0c;使用起来非常方便。 一键查看电脑各硬件详细信息 这款软件是绿色版的&#xff0c;无需安装&#xff0c;打开即可使用&#xff0c;文件大小仅为900多KB&#xff0…...

java如何创建自定义异常?

在Java中&#xff0c;创建自定义异常通常需要继承Exception类或其子类。以下是创建自定义异常的基本步骤&#xff1a; 定义异常类&#xff1a;创建一个新的类&#xff0c;继承自Exception或RuntimeException&#xff08;根据需要选择&#xff09;。 构造方法&#xff1a;提供一…...

2025/2/10 心得

第一题。J. C - Grand Garden (AI) 问题陈述 在一个花坛里&#xff0c;有 NN 朵花&#xff0c;编号为 1,2,\ldots,N1,2,…,N。最初&#xff0c;所有花的高度都是 00。你将得到一个高度序列 h{h\_1,h\_2,h\_3,\ldots\} 作为输入。你希望通过重复以下“浇水”操作来将所有花的编…...

Visual Studio 2022 中使用 Google Test

要在 Visual Studio 2022 中使用 Google Test (gtest)&#xff0c;可以按照以下步骤进行&#xff1a; 安装 Google Test&#xff1a;确保你已经安装了 Google Test。如果没有安装&#xff0c;可以通过 Visual Studio Installer 安装。在安装程序中&#xff0c;找到并选择 Googl…...

软开关和硬开关

硬开关&#xff1a; 电路结构相对简单&#xff0c;一般只包含基本的开关管、电源、负载等元件&#xff0c;没有专门的谐振电路来辅助开关过程。 开关管在导通或关断时&#xff0c;电压或电流的变化率非常快&#xff0c;形成急剧的开关过程。开通时&#xff0c;开关器件的电流…...

C++17中的std::clamp:限制值的范围

文章目录 一、背景与动机二、std::clamp的定义三、使用示例示例1&#xff1a;基本用法示例2&#xff1a;浮点数和自定义类型 四、实际应用场景1. 游戏开发2. 图形处理3. 数值计算 五、注意事项六、总结 在C17中&#xff0c; std::clamp是一个极为实用的算法&#xff0c;它能够…...

Python的

& 运算符可用于不同集合类型&#xff0c;它主要用于集合的交集操作 下面分别介绍它在 set&#xff08;集合&#xff09;和 frozenset&#xff08;不可变集合&#xff09;这两种常见集合类型中的使用 set 类型 set 是 Python 中内置的可变集合类型&#xff0c;使用 & …...

计算机毕业设计Spark+大模型知网文献论文推荐系统 知识图谱 知网爬虫 知网数据分析 知网大数据 知网可视化 预测系统 大数据毕业设计 机器学习

温馨提示&#xff1a;文末有 CSDN 平台官方提供的学长联系方式的名片&#xff01; 温馨提示&#xff1a;文末有 CSDN 平台官方提供的学长联系方式的名片&#xff01; 温馨提示&#xff1a;文末有 CSDN 平台官方提供的学长联系方式的名片&#xff01; 作者简介&#xff1a;Java领…...

13.8 聚焦应用场景的Prompt设计实战:从通用到领域专用的翻译质量跃升

聚焦应用场景的Prompt设计实战:从通用到领域专用的翻译质量跃升 关键词:领域特定Prompt设计、翻译质量优化、动态术语控制、多阶段推理链、Prompt版本管理 1. 翻译Prompt设计核心原则 1.1 领域知识深度渗透 def build_medical_prompt(): return ChatPromptTemplate.from_…...

基础入门-HTTP数据包红蓝队研判自定义构造请求方法请求头修改状态码判断

知识点&#xff1a; 1、请求头&返回包-方法&头修改&状态码等 2、数据包分析-红队攻击工具&蓝队流量研判 3、数据包构造-Reqable自定义添加修改请求 一、演示案例-请求头&返回包-方法&头修改&状态码等 数据包 客户端请求Request 请求方法 …...

Golang Web单体项目目录结构最佳实践

在Golang 开发Web 项目的过程中&#xff0c;如何组织目录结构是一项至关重要的任务。合理的目录结构不仅能提高代码的可维护性&#xff0c;还能为团队协作提供清晰的代码规范。 为什么要设计合理的目录结构&#xff1f; 在 Golang 项目中&#xff0c;代码的组织方式会影响开发…...

【系统架构设计师】体系结构文档化

目录 1. 说明2. 重要性3. 主要内容4. 编写原则5. 实践建议6. 例题6.1 例题1 1. 说明 1.绝大多数的体系结构都是抽象的&#xff0c;由一些概念上的构建组成。2.层的概念在任何程序设计语言中都不存在。3.要让系统分析员和程序员去实现体系结构&#xff0c;还必须将体系结构进行…...

C++性能优化—AI润色版

上接《C性能优化—人工底稿版》 C性能优化深度解析&#xff1a;从编码技巧到硬件协同 "过早优化是万恶之源" —— Donald Knuth 但合理的性能优化是优秀C工程师的核心能力。本文从编码实践到硬件原理&#xff0c;系统梳理C性能优化的知识体系。 一、性能优化的哲学…...

继承(python)

一、基础知识 &#xff08;一&#xff09;定义&#xff1a;子类能继承父类所有的公有属性和公有方法&#xff08;先使用子类的方法、属性&#xff09; &#xff08;二&#xff09;格式&#xff1a; class 子类名&#xff08;父类名&#xff09;&#xff1a; #父类 class Ph…...

jmap使用

常用命令 jmap -heap PID jmap -histo PID | head -20 jmap -dump:formatb,fileheap_dump.hprof PID jmap 是 Java 开发工具包&#xff08;JDK&#xff09;提供的一个命令行工具&#xff0c;用于生成 Java 进程的内存映射信息。它可以帮助开发者分析 Java 堆内存的使用情况…...

Android的MQTT客户端实现

在 Android 平台上实现 MQTT 客户端的完整技术方案&#xff0c;涵盖基础实现、安全连接、性能优化和最佳实践&#xff1a; 一、技术选型与依赖配置 推荐库 Eclipse Paho Android Service&#xff08;官方维护&#xff0c;支持后台运行&#xff09; gradle 复制 // build.gradl…...

Vue.js 如何自定义主题和样式

Vue.js 如何自定义主题和样式 今天我们来聊聊如何在 Vue 项目中自定义主题和样式。无论是你想让自己的应用看起来独一无二&#xff0c;还是想快速适配设计稿&#xff0c;自定义主题和样式都是必不可少的一环。下面我将和大家分享几种常见的自定义方法和技巧。 为什么要自定义…...

强化学习 DPO 算法:基于人类偏好,颠覆 PPO 传统策略

目录 一、引言二、强化学习基础回顾&#xff08;一&#xff09;策略&#xff08;二&#xff09;价值函数 三、近端策略优化&#xff08;PPO&#xff09;算法&#xff08;一&#xff09;算法原理&#xff08;二&#xff09;PPO 目标函数&#xff08;三&#xff09;代码示例&…...

线上HBase client返回超时异常分析 HBase callTimeout=60000

问题现象 HBase client直接返回超时异常 HBase callTimeout=60000, callDuration=60301: row ‘12649160863966c2790195059018040900010003320’ on table ‘Z_UPA’ at region=Z_UPA,1213d1a56,1184027415643. ba7224f83dbb09591a74b7059f17., hostname=abcd,60020,891863950…...

CTF中特别小的EXE是怎么生成的

我们在打CTF时候&#xff0c;出题的爷爷们给出的exe都很小 就10k左右&#xff0c;有的甚至就5k&#xff0c;那时候我很郁闷啊。现在我也能了啊哈哈 不多bb按如下操作&#xff1a; 我们来看看正常的release生成的代码# Copy #include "windows.h" int main(){ Messa…...

Python 字典(一个简单的字典)

在本章中&#xff0c;你将学习能够将相关信息关联起来的Python字典。你将学习如何访问和修改字典中的信息。鉴于字典可存储的信息量几乎不受限制&#xff0c;因此我们会演示如何遍 历字典中的数据。另外&#xff0c;你还将学习存储字典的列表、存储列表的字典和存储字典的字典。…...

爬虫技巧汇总

一、UA大列表 USER_AGENT_LIST 是一个包含多个用户代理字符串的列表&#xff0c;用于模拟不同浏览器和设备的请求。以下是一些常见的用户代理字符串&#xff1a; USER_AGENT_LIST [Mozilla/4.0 (compatible; MSIE 7.0; Windows NT 5.1; Trident/4.0; Hot Lingo 2.0),Mozilla…...

SCT2A15一款5.5V-100V 1.8A峰值电流限制 高效率非同步降压DCDC转换器,SOT23-6L封装

SCT2A15是一款异步降压转换器&#xff0c;输入电压范围从5.5V到100V&#xff0c;可适应各种降压应用&#xff0c;是汽车、工业和照明应用的理想选择。 SCT2A15集成了975mΩ高侧MOSFET&#xff0c;峰值输出电流在Vin<60V时限制为1.8A&#xff0c;可支持高峰值电流的应用。 SC…...

数据结构——二叉树

好&#xff0c;上一篇我们已经讲过了堆&#xff0c;也已经了解了二叉树的基础知识后&#xff0c;我们今天来实现二叉树的相关代码。 由于初始二叉树&#xff0c;由于现在对二叉树结构掌握还不够深入&#xff0c;为了降低学习成本&#xff0c;此处我们来手动快速创建一棵简单的二…...

六、 通用异步收发器UART

6.1 UART简介 UART&#xff08;Universal Asynchronous Receiver/Transmitter&#xff0c;通用异步收发传输器&#xff09;是一种用于异步串行通信的硬件设备。它通过两根信号线&#xff08;TX 和 RX&#xff09;实现全双工通信&#xff0c;广泛应用于微控制器、计算机和外设之…...

基于Kotlin中Flow扩展重试方法

最近项目中统一采用Kotlin的Flow来重构了网络请求相关代码。 目前的场景是&#xff0c;接口在请求的时候需要一个accessToken值&#xff0c;因为此值会过期或者不存在&#xff0c;需要刷新&#xff0c;因此最终方案是在使用Flow请求的时候先获取accessToken值然后再进行接口请求…...

在 Open WebUI+Ollama 上运行 DeepSeek-R1-70B 实现调用

在 Open WebUI Ollama 上运行 DeepSeek-R1-70B 实现调用 您可以使用 Open WebUI 结合 Ollama 来运行 DeepSeek-R1-70B 模型&#xff0c;并通过 Web 界面进行交互。以下是完整的部署步骤。 1. 安装 Ollama Ollama 是一个本地化的大模型管理工具&#xff0c;它可以在本地运行 …...

速度超越DeepSeek!Le Chat 1100tok/s闪电回答,ChatGPT 4o和DeepSeek R1被秒杀?

2023年&#xff0c;当全球科技界还在ChatGPT引发的AI狂潮中沉浮时&#xff0c;一场来自欧洲的"静默革命"正悄然改变游戏规则。法国人工智能公司Mistral AI推出的聊天机器人Le Chat以"比ChatGPT快10倍"的惊人宣言震动业界&#xff0c;其背后承载的不仅是技术…...

如何使用C++将处理后的信号保存为PNG和TIFF格式

在信号处理领域&#xff0c;我们常常需要将处理结果以图像的形式保存下来&#xff0c;方便后续分析和展示。C提供了多种库来处理图像数据&#xff0c;本文将介绍如何使用stb_image_write库保存为PNG格式图像以及使用OpenCV库保存为TIFF格式图像。 1. PNG格式保存 使用stb_ima…...

2 CXX-Qt #[cxx_qt::bridge] 宏指南

#[cxx_qt::bridge] 宏是用于在 Rust 中创建一个模块&#xff0c;该模块能够桥接 Rust 和 Qt&#xff08;通过 C&#xff09;之间的交互。它允许你将 Rust 类型暴露给 Qt 作为 QObject、Q_SIGNAL、Q_PROPERTY 等&#xff0c;同时也能够将 Qt 的特性和类型绑定到 Rust 中&#xf…...

PHP函数介绍—get_headers(): 获取URL的响应头信息

概述&#xff1a;在PHP开发中&#xff0c;我们经常需要获取网页或远程资源的响应头信息。PHP函数get_headers()能够方便地获取目标URL的响应头信息&#xff0c;并以数组形式返回。本文将介绍get_headers()函数的用法&#xff0c;以及提供一些相关的代码示例。 get_headers()函…...

C#树图显示目录下所有文件以及文件大小(使用Stack元组来替换递归)

接上篇 C#树图显示目录下所有文件以及文件大小_c# 查看文件夹里面有多少文件-CSDN博客 上一篇我们使用递归的方法来实现绑定目录和文件到树图中,关键程序代码如下: 这里我们使用Stack的方式非递归方法来实现绑定目录和文件到树图: /// <summary>/// 递归方法&#xff…...

计算机毕业设计Python+Spark知识图谱医生推荐系统 医生门诊预测系统 医生数据分析 医生可视化 医疗数据分析 医生爬虫 大数据毕业设计 机器学习

温馨提示&#xff1a;文末有 CSDN 平台官方提供的学长联系方式的名片&#xff01; 温馨提示&#xff1a;文末有 CSDN 平台官方提供的学长联系方式的名片&#xff01; 温馨提示&#xff1a;文末有 CSDN 平台官方提供的学长联系方式的名片&#xff01; 作者简介&#xff1a;Java领…...

机器学习:朴素贝叶斯分类器

贝叶斯决策论是概率框架下实施决策的基本方法,对分类任务来说,在所有相关概率都已知的理想情形下,贝叶斯决策论考虑如何基于这些概率和误判损失来选择最优的类别标记。 贝叶斯定理是贝叶斯决策论的基础&#xff0c;描述了如何根据新的证据更新先验概率&#xff0c;贝叶斯定理&…...

解决 keep-alive 缓存组件中定时器干扰问题

当使用 keep-alive 缓存组件时&#xff0c;组件中的定时器可能会在组件被缓存后继续运行&#xff0c;从而干扰其他组件的逻辑。为了避免这种情况&#xff0c;可以通过以下方法解决&#xff1a; 1. 在组件的 deactivated 钩子中清理定时器 keep-alive 为缓存的组件提供了 acti…...

1-portal认证功能

很多时候公共网络需要提供安全认证功能&#xff0c;比如我们去星巴克或者商场、酒店&#xff0c;我们连接wifi上网的时候&#xff0c; 需要认证后才可以上网。 用户可以主动访问已知的Portal认证网站&#xff0c;输入用户名和密码进行认证&#xff0c;这种开始Portal认证的方式…...

Kafka 的消费offset原来是使用ZK管理,现在新版本是怎么管理的?

目录 基于 ZooKeeper 管理消费 offset 原理 缺点 新版本基于内部主题管理消费 offset 原理 优点 示例代码(Java) 在 Kafka 早期版本中,消费者的消费偏移量(offset)是存储在 ZooKeeper 中的,但由于 ZooKeeper 并不适合高频读写操作,从 Kafka 0.9 版本开始,消费偏…...

LabVIEW图像水印系统

图像水印技术在数字图像处理中起着重要作用&#xff0c;它能够保护图像的版权、确保图像的完整性&#xff0c;并提供额外的信息嵌入。本项目旨在利用LabVIEW开发一个图像水印系统&#xff0c;实现图像水印的嵌入和提取功能&#xff0c;为数字图像处理提供便捷的工具。 一、项目…...

Bash (Bourne-Again Shell)、Zsh (Z Shell)

文章目录 1. 历史背景2. 主要区别3. 功能对比自动补全插件和主题路径扩展提示符定制 4. 性能5. 使用场景6. 如何切换 Shell7. 总结 以下是 Bash 和 Zsh 之间的主要区别&#xff0c;列成表格方便对比&#xff1a; 特性BashZsh默认Shell大多数Linux发行版默认ShellmacOS默认She…...

iOS AES/CBC/CTR加解密以及AES-CMAC

感觉iOS自带的CryptoKit不好用&#xff0c;有个第三方库CryptoSwift还不错&#xff0c;好巧不巧&#xff0c;清理过Xcode缓存后死活下载不下来&#xff0c;当然也可以自己编译个Framework&#xff0c;但是偏偏不想用第三方库了&#xff0c;于是研究了一下&#xff0c;自带的Com…...