当前位置: 首页 > 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 关键字被设置为提供的…...

STM32系统架构介绍

STM32系统架构 1. CM3/4系统架构2. CM3/4系统架构-----存储器组织结构2.1 寄存器地址映射&#xff08;特殊的存储器&#xff09;2.2 寄存器地址计算2.3 寄存器的封装 3. CM3/4系统架构-----时钟系统 STM32 和 ARM 以及 ARM7是什么关系? ARM 是一个做芯片标准的公司&#xff0c…...

Macbook Pro快速搭建Easysearch学习环境

在学习过程中&#xff0c;我们有时身边没有可用的服务器&#xff0c;这时就需要借助自己的 Mac 来安装和学习 Easysearch。然而&#xff0c;Easysearch 官网并未提供 Mac 版本的安装教程&#xff0c;下面我将详细整理我在 Mac 上安装和使用 Easysearch 的折腾经历。 Easysearc…...

老游戏回顾:SWRacer

竞速类游戏里&#xff0c;我很怀念它。 虽然已经25年过去了。 相比之下&#xff0c;别的游戏真的没法形容。 ---- 是LucasArts制作的一款赛车竞速游戏&#xff1b; 玩家要扮演一名银河旅行者参加各种赛车比赛&#xff0c;赢得奖金&#xff0c;在经历了八个不同星球上的24场…...

Firefox无法隐藏标题栏

Openbox 窗管 Firefox 无法隐藏标题栏。 深度Linux安装火狐,Linux(deepin) 下隐藏 Firefox 标题栏-CSDN博客 需要在 desktop 的 exec 中增加环境变量&#xff1a; Execenv MOZ_GTK_TITLEBAR_DECORATIONclient firefox...

vue基础(五)

Vue 实例在创建、挂载、更新、销毁的过程中会触发一系列的生命周期钩子&#xff08;Lifecycle Hooks&#xff09;&#xff0c;让开发者可以在不同阶段执行逻辑。 1. Vue 2 生命周期完整流程 生命周期的四个主要阶段 创建阶段&#xff08;Creation&#xff09;挂载阶段&#…...

MySQL的深度分页如何优化?

大家好&#xff0c;我是锋哥。今天分享关于【MySQL的深度分页如何优化&#xff1f;】面试题。希望对大家有帮助&#xff1b; MySQL的深度分页如何优化&#xff1f; 1000道 互联网大厂Java工程师 精选面试题-Java资源分享网 MySQL的深度分页&#xff08;即跳过大量数据后进行分…...

深度学习每周学习总结R6(RNN实现阿尔茨海默病诊断)

&#x1f368; 本文为&#x1f517;365天深度学习训练营 中的学习记录博客R8中的内容&#xff0c;为了便于自己整理总结起名为R6&#x1f356; 原作者&#xff1a;K同学啊 | 接辅导、项目定制 目录 0. 总结1. 数据集介绍2. 数据预处理3. 模型构建4. 初始化模型及优化器5. 训练函…...

Node.js 多模态图像描述服务 调用siliconflow:现代 JavaScript 实践

Node.js 多模态图像描述服务&#xff1a;现代 JavaScript 实践 项目背景 本项目使用 Node.js 和 TypeScript 实现一个高性能的图像描述微服务&#xff0c;展示 JavaScript 在多模态 AI 应用中的强大能力。 技术栈 Node.jsTypeScriptExpress.jsOpenAI APIdotenvRxJS (可选&a…...

机器学习数学基础:21.特征值与特征向量

一、引言 在现代科学与工程的众多领域中&#xff0c;线性代数扮演着举足轻重的角色。其中&#xff0c;特征值、特征向量以及相似对角化的概念和方法&#xff0c;不仅是线性代数理论体系的核心部分&#xff0c;更是解决实际问题的有力工具。无论是在物理学中描述系统的振动模式…...

【目标检测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 算法代码实现&#xff08;以 Python 和 PyTorch 为例&#xff09;五、PPO 算法案例应用5.1 机器人控制5.2 自动驾驶 六、总结 一、引言 强化学习作为…...

vue-点击生成动态值,动态渲染回显输入框

1.前言 动态点击生成数值&#xff0c;回显输入框&#xff0c;并绑定。 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 端口号为何位于首部前四个字节?协议设计的智慧与启示

知乎的一个问题很有意思&#xff1a;“为什么在TCP首部中要把TCP的端口号放入最开始的四个字节&#xff1f;” 这种问题很适合我这种搞历史的人&#xff0c;大年初一我给出了一个简短的解释&#xff0c;但仔细探究这个问题&#xff0c;我们将会获得 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 数组&#xff1a;高效数据处理的基础 引言 在数据科学和统计分析领域&#xff0c;R 语言以其强大的数据处理和分析能力而备受推崇。R 数组是 R 语言中用于存储和操作数据的基本数据结构。本文将详细介绍 R 数组的创建、操作和优化&#xff0c;帮助读者掌握 R 数组的使用技巧…...

git服务器搭建,gitea服务搭建,使用systemclt管理服务

文章目录 页面展示使用二进制文件安装git服务下载选择架构使用wget下载安装 验证 GPG 签名服务器设置准备环境创建systemctl文件 备份与恢复备份命令 (dump)恢复命令 (restore) 页面展示 使用二进制文件安装git服务 所有打包的二进制程序均包含 SQLite&#xff0c;MySQL 和 Po…...

Pdf手册阅读(1)--数字签名篇

原文阅读摘要 PDF支持的数字签名&#xff0c; 不仅仅是公私钥签名&#xff0c;还可以是指纹、手写、虹膜等生物识别签名。PDF签名的计算方式&#xff0c;可以基于字节范围进行计算&#xff0c;也可以基于Pdf 对象&#xff08;pdf object&#xff09;进行计算。 PDF文件可能包…...

嵌入式WebRTC压缩至670K,目标将so动态库压缩至500K,.a静态库还可以更小

最近把EasyRTC的效果发布出去给各大IPC厂商体验了一下&#xff0c;直接就用EasyRTC与各个厂商的负责人进行的通话&#xff0c;在通话中&#xff0c;用户就反馈效果确实不错&#xff01; 这两天有用户要在海思hi3516cv610上使用EasyRTC&#xff0c;工具链是&#xff1a;gcc-2024…...

Docker 离线安装指南

参考文章 1、确认操作系统类型及内核版本 Docker依赖于Linux内核的一些特性&#xff0c;不同版本的Docker对内核版本有不同要求。例如&#xff0c;Docker 17.06及之后的版本通常需要Linux内核3.10及以上版本&#xff0c;Docker17.09及更高版本对应Linux内核4.9.x及更高版本。…...

Qt/C++开发监控GB28181系统/取流协议/同时支持udp/tcp被动/tcp主动

一、前言说明 在2011版本的gb28181协议中&#xff0c;拉取视频流只要求udp方式&#xff0c;从2016开始要求新增支持tcp被动和tcp主动两种方式&#xff0c;udp理论上会丢包的&#xff0c;所以实际使用过程可能会出现画面花屏的情况&#xff0c;而tcp肯定不丢包&#xff0c;起码…...

遍历 Map 类型集合的方法汇总

1 方法一 先用方法 keySet() 获取集合中的所有键。再通过 gey(key) 方法用对应键获取值 import java.util.HashMap; import java.util.Set;public class Test {public static void main(String[] args) {HashMap hashMap new HashMap();hashMap.put("语文",99);has…...

Objective-C常用命名规范总结

【OC】常用命名规范总结 文章目录 【OC】常用命名规范总结1.类名&#xff08;Class Name)2.协议名&#xff08;Protocol Name)3.方法名&#xff08;Method Name)4.属性名&#xff08;Property Name&#xff09;5.局部变量/实例变量&#xff08;Local / Instance Variables&…...

鸿蒙中用HarmonyOS SDK应用服务 HarmonyOS5开发一个医院挂号小程序

一、开发准备 ​​环境搭建​​&#xff1a; 安装DevEco Studio 3.0或更高版本配置HarmonyOS SDK申请开发者账号 ​​项目创建​​&#xff1a; File > New > Create Project > Application (选择"Empty Ability") 二、核心功能实现 1. 医院科室展示 /…...

在Ubuntu中设置开机自动运行(sudo)指令的指南

在Ubuntu系统中&#xff0c;有时需要在系统启动时自动执行某些命令&#xff0c;特别是需要 sudo权限的指令。为了实现这一功能&#xff0c;可以使用多种方法&#xff0c;包括编写Systemd服务、配置 rc.local文件或使用 cron任务计划。本文将详细介绍这些方法&#xff0c;并提供…...

Python爬虫(一):爬虫伪装

一、网站防爬机制概述 在当今互联网环境中&#xff0c;具有一定规模或盈利性质的网站几乎都实施了各种防爬措施。这些措施主要分为两大类&#xff1a; 身份验证机制&#xff1a;直接将未经授权的爬虫阻挡在外反爬技术体系&#xff1a;通过各种技术手段增加爬虫获取数据的难度…...

C++中string流知识详解和示例

一、概览与类体系 C 提供三种基于内存字符串的流&#xff0c;定义在 <sstream> 中&#xff1a; std::istringstream&#xff1a;输入流&#xff0c;从已有字符串中读取并解析。std::ostringstream&#xff1a;输出流&#xff0c;向内部缓冲区写入内容&#xff0c;最终取…...

C++ 求圆面积的程序(Program to find area of a circle)

给定半径r&#xff0c;求圆的面积。圆的面积应精确到小数点后5位。 例子&#xff1a; 输入&#xff1a;r 5 输出&#xff1a;78.53982 解释&#xff1a;由于面积 PI * r * r 3.14159265358979323846 * 5 * 5 78.53982&#xff0c;因为我们只保留小数点后 5 位数字。 输…...

JDK 17 新特性

#JDK 17 新特性 /**************** 文本块 *****************/ python/scala中早就支持&#xff0c;不稀奇 String json “”" { “name”: “Java”, “version”: 17 } “”"; /**************** Switch 语句 -> 表达式 *****************/ 挺好的&#xff…...