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 中,this 的绑定是一个常见问题,尤其在类组件中使用事件处理函数时。JavaScript 中的 bind 函数用于设置函数调用时 this 的值。 bind 函数的作用 bind() 方法创建一个新的函数,当被调用时,其 this 关键字被设置为提供的…...
STM32系统架构介绍
STM32系统架构 1. CM3/4系统架构2. CM3/4系统架构-----存储器组织结构2.1 寄存器地址映射(特殊的存储器)2.2 寄存器地址计算2.3 寄存器的封装 3. CM3/4系统架构-----时钟系统 STM32 和 ARM 以及 ARM7是什么关系? ARM 是一个做芯片标准的公司,…...
Macbook Pro快速搭建Easysearch学习环境
在学习过程中,我们有时身边没有可用的服务器,这时就需要借助自己的 Mac 来安装和学习 Easysearch。然而,Easysearch 官网并未提供 Mac 版本的安装教程,下面我将详细整理我在 Mac 上安装和使用 Easysearch 的折腾经历。 Easysearc…...
老游戏回顾:SWRacer
竞速类游戏里,我很怀念它。 虽然已经25年过去了。 相比之下,别的游戏真的没法形容。 ---- 是LucasArts制作的一款赛车竞速游戏; 玩家要扮演一名银河旅行者参加各种赛车比赛,赢得奖金,在经历了八个不同星球上的24场…...
Firefox无法隐藏标题栏
Openbox 窗管 Firefox 无法隐藏标题栏。 深度Linux安装火狐,Linux(deepin) 下隐藏 Firefox 标题栏-CSDN博客 需要在 desktop 的 exec 中增加环境变量: Execenv MOZ_GTK_TITLEBAR_DECORATIONclient firefox...
vue基础(五)
Vue 实例在创建、挂载、更新、销毁的过程中会触发一系列的生命周期钩子(Lifecycle Hooks),让开发者可以在不同阶段执行逻辑。 1. Vue 2 生命周期完整流程 生命周期的四个主要阶段 创建阶段(Creation)挂载阶段&#…...
MySQL的深度分页如何优化?
大家好,我是锋哥。今天分享关于【MySQL的深度分页如何优化?】面试题。希望对大家有帮助; MySQL的深度分页如何优化? 1000道 互联网大厂Java工程师 精选面试题-Java资源分享网 MySQL的深度分页(即跳过大量数据后进行分…...
深度学习每周学习总结R6(RNN实现阿尔茨海默病诊断)
🍨 本文为🔗365天深度学习训练营 中的学习记录博客R8中的内容,为了便于自己整理总结起名为R6🍖 原作者:K同学啊 | 接辅导、项目定制 目录 0. 总结1. 数据集介绍2. 数据预处理3. 模型构建4. 初始化模型及优化器5. 训练函…...
Node.js 多模态图像描述服务 调用siliconflow:现代 JavaScript 实践
Node.js 多模态图像描述服务:现代 JavaScript 实践 项目背景 本项目使用 Node.js 和 TypeScript 实现一个高性能的图像描述微服务,展示 JavaScript 在多模态 AI 应用中的强大能力。 技术栈 Node.jsTypeScriptExpress.jsOpenAI APIdotenvRxJS (可选&a…...
机器学习数学基础:21.特征值与特征向量
一、引言 在现代科学与工程的众多领域中,线性代数扮演着举足轻重的角色。其中,特征值、特征向量以及相似对角化的概念和方法,不仅是线性代数理论体系的核心部分,更是解决实际问题的有力工具。无论是在物理学中描述系统的振动模式…...
【目标检测json2txt】label从COCO格式json文件转YOLO格式txt文件
目录 🍀🍀1.COCO格式json文件 🌷🌷2.YOLO格式txt文件 💖💖3.xml2json代码(python) 🐸🐸4.输入输出展示 🙋🙋4.1输入json 🍂🍂4.2输出txt 整理不易,欢迎一键三连!!! 送你们一条美丽的--分割线-- 🍀🍀1.COCO格式json文件 COCO数…...
强化学习之 PPO 算法:原理、实现与案例深度剖析
目录 一、引言二、PPO 算法原理2.1 策略梯度2.2 PPO 核心思想 三、PPO 算法公式推导3.1 重要性采样3.2 优势函数估计 四、PPO 算法代码实现(以 Python 和 PyTorch 为例)五、PPO 算法案例应用5.1 机器人控制5.2 自动驾驶 六、总结 一、引言 强化学习作为…...
vue-点击生成动态值,动态渲染回显输入框
1.前言 动态点击生成数值,回显输入框,并绑定。 2.实现 <template><div style"display:flex;align-items: center;flex-direction:row"><a-input:key"inputKey"v-model"uploadData[peo.field]"placehold…...
高性能 :OpenAI Triton Open-source GPU programming Language LINUX 环境配置
目录 配置triton环境cudabuild-essential带有pip的python环境直接安装pipanaconda 安装 triton 环境pip install tritonpip install torch 运行test示例vector-add.pylaunch.json 配置triton环境 cuda wget http://developer.download.nvidia.com/compute/cuda/11.0.2/local_…...
TCP 端口号为何位于首部前四个字节?协议设计的智慧与启示
知乎的一个问题很有意思:“为什么在TCP首部中要把TCP的端口号放入最开始的四个字节?” 这种问题很适合我这种搞历史的人,大年初一我给出了一个简短的解释,但仔细探究这个问题,我们将会获得 TCP/IP 被定义的过程。 文…...
HTML之JavaScript函数声明
HTML之JavaScript函数声明 1. function 函数名(){}2. var 函数名 function(){}<!DOCTYPE html> <html lang"en"><head><meta charset"UTF-8"><meta name"viewport" content"widthdevice-width, initial-scale1…...
R 数组:高效数据处理的基础
R 数组:高效数据处理的基础 引言 在数据科学和统计分析领域,R 语言以其强大的数据处理和分析能力而备受推崇。R 数组是 R 语言中用于存储和操作数据的基本数据结构。本文将详细介绍 R 数组的创建、操作和优化,帮助读者掌握 R 数组的使用技巧…...
git服务器搭建,gitea服务搭建,使用systemclt管理服务
文章目录 页面展示使用二进制文件安装git服务下载选择架构使用wget下载安装 验证 GPG 签名服务器设置准备环境创建systemctl文件 备份与恢复备份命令 (dump)恢复命令 (restore) 页面展示 使用二进制文件安装git服务 所有打包的二进制程序均包含 SQLite,MySQL 和 Po…...
Pdf手册阅读(1)--数字签名篇
原文阅读摘要 PDF支持的数字签名, 不仅仅是公私钥签名,还可以是指纹、手写、虹膜等生物识别签名。PDF签名的计算方式,可以基于字节范围进行计算,也可以基于Pdf 对象(pdf object)进行计算。 PDF文件可能包…...
嵌入式WebRTC压缩至670K,目标将so动态库压缩至500K,.a静态库还可以更小
最近把EasyRTC的效果发布出去给各大IPC厂商体验了一下,直接就用EasyRTC与各个厂商的负责人进行的通话,在通话中,用户就反馈效果确实不错! 这两天有用户要在海思hi3516cv610上使用EasyRTC,工具链是:gcc-2024…...
[特殊字符] 智能合约中的数据是如何在区块链中保持一致的?
🧠 智能合约中的数据是如何在区块链中保持一致的? 为什么所有区块链节点都能得出相同结果?合约调用这么复杂,状态真能保持一致吗?本篇带你从底层视角理解“状态一致性”的真相。 一、智能合约的数据存储在哪里…...
Linux应用开发之网络套接字编程(实例篇)
服务端与客户端单连接 服务端代码 #include <sys/socket.h> #include <sys/types.h> #include <netinet/in.h> #include <stdio.h> #include <stdlib.h> #include <string.h> #include <arpa/inet.h> #include <pthread.h> …...
MPNet:旋转机械轻量化故障诊断模型详解python代码复现
目录 一、问题背景与挑战 二、MPNet核心架构 2.1 多分支特征融合模块(MBFM) 2.2 残差注意力金字塔模块(RAPM) 2.2.1 空间金字塔注意力(SPA) 2.2.2 金字塔残差块(PRBlock) 2.3 分类器设计 三、关键技术突破 3.1 多尺度特征融合 3.2 轻量化设计策略 3.3 抗噪声…...
JavaSec-RCE
简介 RCE(Remote Code Execution),可以分为:命令注入(Command Injection)、代码注入(Code Injection) 代码注入 1.漏洞场景:Groovy代码注入 Groovy是一种基于JVM的动态语言,语法简洁,支持闭包、动态类型和Java互操作性,…...
css实现圆环展示百分比,根据值动态展示所占比例
代码如下 <view class""><view class"circle-chart"><view v-if"!!num" class"pie-item" :style"{background: conic-gradient(var(--one-color) 0%,#E9E6F1 ${num}%),}"></view><view v-else …...
质量体系的重要
质量体系是为确保产品、服务或过程质量满足规定要求,由相互关联的要素构成的有机整体。其核心内容可归纳为以下五个方面: 🏛️ 一、组织架构与职责 质量体系明确组织内各部门、岗位的职责与权限,形成层级清晰的管理网络…...
鸿蒙中用HarmonyOS SDK应用服务 HarmonyOS5开发一个医院查看报告小程序
一、开发环境准备 工具安装: 下载安装DevEco Studio 4.0(支持HarmonyOS 5)配置HarmonyOS SDK 5.0确保Node.js版本≥14 项目初始化: ohpm init harmony/hospital-report-app 二、核心功能模块实现 1. 报告列表…...
【论文阅读28】-CNN-BiLSTM-Attention-(2024)
本文把滑坡位移序列拆开、筛优质因子,再用 CNN-BiLSTM-Attention 来动态预测每个子序列,最后重构出总位移,预测效果超越传统模型。 文章目录 1 引言2 方法2.1 位移时间序列加性模型2.2 变分模态分解 (VMD) 具体步骤2.3.1 样本熵(S…...
深度学习习题2
1.如果增加神经网络的宽度,精确度会增加到一个特定阈值后,便开始降低。造成这一现象的可能原因是什么? A、即使增加卷积核的数量,只有少部分的核会被用作预测 B、当卷积核数量增加时,神经网络的预测能力会降低 C、当卷…...
iview框架主题色的应用
1.下载 less要使用3.0.0以下的版本 npm install less2.7.3 npm install less-loader4.0.52./src/config/theme.js文件 module.exports {yellow: {theme-color: #FDCE04},blue: {theme-color: #547CE7} }在sass中使用theme配置的颜色主题,无需引入,直接可…...
