react里jsx的事件绑定的this指向问题

最新推荐文章于 2024-08-24 20:13:29 发布
最新推荐文章于 2024-08-24 20:13:29 发布
阅读量21 收藏
点赞数
文章标签： react.js 前端 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_51482067/article/details/133376648
版权

浏览器无法直接识别jsx语法，执行jsx时被babel解析转译,而babel解析过的js代码会默认转化为严格模式。严格模式下最外层的函数默认调用本指向window的this会变成undefind

简单大致的解释一 点击事件的运行过程

上面的可能有点抽象 这里用js再解释一下

所以这里推荐两种解决方法

1.就是直接绑定this

2.就是嵌套在箭头函数中(最常用)

        解析一下，Dom元素的点击事件触发执行箭头函数箭头函数的指向为这个组件的实例对象箭头函数又调用了我们需要的函数 普通函数就是谁先用this就指向谁这时候函数的this也指向了这个组件的实例对象

不会敲代码的斑马
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
React的基本使用&JSX的基本使用&React组件&事件处理State&setState&事件绑定this指向
fengzitaba的博客
08-05 1074
React的基本使用 React的安装 安装命令:npm i react react-dom react包是核心,提供创建元素,组件等功能 react-dom 提供DOM相关功能 React的使用 1.引入react和react-dom的两个js文件 <script src="./node_modules/react/umd/react.development.js"></script> <script src="./node_modules/react-dom/umd/rea
事件绑定中this指向问题
林夏天的博客
05-07 767
<!DOCTYPE html> <html lang="zh-cmn-Hans"> <head> <meta charset="utf-8"> <title>This</title> <style> #container{ width: 100%; ...
【react】jsx中，解决事件处理程序 this指向问题
呆呆狗
10-06 405
class Hello extends React.Component { state = { count: 0, } handleSum() { // 事件处理程序中的 this 是 undefined // 这个方法其实是 react 内部调用 ， 内部调用的时候，没有 正确绑定 this } render() { return ( <div>
React-事件处理与this指向问题
cc2231293148的博客
12-15 451
这个对象和之前学习的事件对象所包含的方法和属性都基本一致，不同的是React中的事件对象并不是浏览器提供的，而是它自己内部所构建的。React元素的事件处理和DOM元素的很相似，但是有一点语法上的不同。React元素的事件绑定采用。在React里，类组件与函数组件绑定事件是差不多的，只是在类组件中绑定事件函数的时候需要用到。React中可以通过事件处理函数的参数获取到事件对象，它的事件对象叫做：合成事件，的方式来绑定一个事件，注意，这里和原生的事件是有区别的，，代表指向当前的类的引用，在函数中不需要调用。
React学习之JSX与react事件实例分析
10-15
事件处理函数通常在组件类的方法中定义，并通过`.bind(this)`确保`this`指向正确。例如： ```jsx class Toggle extends React.Component { constructor(props) { super(props); this.state = { flag: true }; ...
React学习之事件绑定的几种方法对比
08-29
这种方法是在类的构造函数中预先绑定`this`，确保在事件处理函数中`this`始终指向组件实例。例如： ```jsx class Button extends React.Component { constructor(props) { super(props); this.handleClick = ...
1-6、React组件中传值、添加事件和this丢失问题
01-20
React中的事件处理通常在组件类的方法中定义，这些方法会绑定到`this`以便访问组件的状态和属性。然而，当事件处理器在外部触发时（如用户点击按钮），`this`的上下文可能不再指向组件实例，导致`this.props`或`this...
详解三种方式在React中解决绑定this的作用域问题并传参
10-14
为了解决这个问题，可以在事件处理函数上使用`.bind()`方法显式地绑定`this`。 ```jsx render() { return ( type="button" value="Way1" onClick={this.changeMsg1.bind(this)} // 使用.bind(this) /> ...
React组件中的this的具体使用
08-27
在React组件中,this的使用是一个非常重要的概念，因为它关系到组件的生命周期和事件处理机制。在本文中，我们将详细介绍React组件中的this的使用方式，及其在JavaScript函数中的应用。 首先，让我们来看一个简单的...
React 学习——React.memo（简单、引用类型的prop）
qq_40269801的博客
08-20 518
React React.memo（简单、引用类型的prop） 1、传递一个简单类型的prop，prop变化时组件重新渲染 2、传递一个引用类型的prop，比较的是新值和旧值的引用是否相等;当父组件的函数重新执行时，实际上形成的是新的数组引用； 3、保持引用稳定->useMemo 组件渲染的过程中缓存一个值
react 路由创建与使用
weixin_45561719的博客
08-23 359
2，路由组件 createBrowserRouter。
Zustand：让React状态管理更简单、更高效
最新发布
丫丫不秃头噢---
08-24 260
这个单词在德语里是状态的意思（发音：促stand）
React Hook Form：指南与示例
Yvette Lau的专栏
08-23 345
表单是用户与网站和Web应用程序交互的重要组成部分。验证用户通过表单提交的数据是开发者的一项关键职责。React Hook Form是一个帮助在React中验证表单的库。它是一个没有其他依赖项的精简库，性能优越，使用简单，开发者可以比使用其他表单库写更少的代码。在本指南中，您将学习如何使用React Hook Form库在React中构建表单，而无需使用复杂的渲染属性（render props）或...
使用React和AntDesign构建初始前端项目及路由配置
123
08-20 653
创建React项目，并使用antDesignUI库，配置页面路由
FastAPI+React18开发通用后台管理系统用户功能实战
Python私教
08-21 237
如果你想要完整的代码，或者完整的视频教程，或者一对一的私教课，欢迎留言或者私信。当然，想要实现完整的功能肯定远不止这些代码，这里录制了完整的视频教程如下。先看看登录功能使用FastAPI是怎么开发的。没有登录就访问首页则提示请先登录。这些功能是怎么实现的呢？
react中的useCallback、useMemo、useRef 和 useContext
huhudeni的博客
08-23 824
上一个文章中我们讲述了useState 和 useEffect 这两个最为核心的 Hooks 的用法。理解了它们，基本上就掌握了 React 函数组件的开发思路。在 React 函数组件中，每一次 UI 的变化，都是通过重新执行整个函数来完成的，这和传统的 Class 组件有很大区别：函数组件中并没有一个直接的方式在多次渲染之间维持一个状态。在第 2 节课中你已经知道了，React 组件之间的状态传递只有一种方式，那就是通过 props。这就意味着这种传递关系只能在父子组件之间进行。
react 路由
weixin_42371812的博客
08-21 232
学习了好一段时间，终于学到了react 路由这个环节。不管是哪个语言，也不管是哪个框架，路由的定义都是一样的。所以，我也就不多说废话，直接来实际的。
fastapi+react实现第三方登录功能示例
qq_36892712的博客
08-21 682
实现使用第三方登录功能（例如 Google、GitHub、WeChat 等）通常涉及前后端的协同工作。以下是一个基本的实现方案，使用 FastAPI 作为后端，React 作为前端。后端：使用 FastAPI 处理 OAuth2 回调，获取用户信息，并将其与现有用户关联或创建新用户。同时，提供动态获取登录 URL 的接口。前端：使用 React 处理登录按钮和回调逻辑，从后端动态获取登录 URL，并将获取的存储在中，并在用户访问个人资料页面时使用该获取用户信息。
react子组件里面this未定义
05-18
如果在 React 子组件中 `this` 未定义，有可能是因为你在子组件中使用了箭头函数，但是箭头函数中的 `this` 指向的不是组件实例。为了解决这个问题，你可以在构造函数中绑定方法的 `this`，或者在箭头函数中使用 `...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值