react2: 事件处理-this的指向问题

已于 2022-05-15 14:29:28 修改
阅读量72 收藏
点赞数
分类专栏： react 文章标签： react.js javascript 前端
于 2022-05-04 22:20:55 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/wxzs9999/article/details/124570258
版权

前言： 本系列(R1)文章目前适用于初学者查看 

目标：了解事件处理程序中this指向undefined且知道原因

 在react官网中也对事件处理中this指向问题有说明：（如图）

内容：

  1. 事件处理程序中this是指向undefined
  2. render方法中的this指向的是当前react组件。只有事件处理程序中的this有问题。

原因：

  • 事件处理程序中的函数式函数调用模式，在js严格模式下（模块式），this指向undefined
  • render函数是被组件实例调用的，因此其中的this指向的是当前组件。

解决：（重点）

  1. render中使用箭头函数（不推荐）

2.使用bind

 bind会返回一个函数的实例 （新的函数）。注意不能用call apply，因为call apply会直接调用函数。

好处：1.事件对象不受影响  2.代码结构美观

3.将注册事件改写为箭头函数-推荐！！

因为箭头函数内部没有this,指向的是上一级的this

憨吃不胖嘻嘻嘻
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
1-6、React组件中传值、添加事件和this丢失问题
01-20
在React组件开发中，理解和掌握组件间的值传递、事件处理以及`this`的正确使用是至关重要的。在本文中，我们将深入探讨这两个关键知识点。 ### 1、组件中传值 在React中，组件间传递数据主要是通过props（属性）...
React 事件处理
12-13
React 事件处理是React.js库中处理用户交互的关键机制，它与传统的HTML事件处理有显著的差异。在React中，事件处理遵循JavaScript的驼峰命名规则，而不是HTML的小写命名方式。例如，HTML中通常使用`onclick`，而在...
React中this指向问题
一杯清泉
04-04 499
render() { return ( <div> <h1>{this.state.data}</h1> <button onClick={this.click1}>测试1</button> </div> ) } click1() { this.setState({ data:'click1' }) } 像这.
React中事件处理-this指向问题
weixin_48885013的博客
02-10 409
问题描述：当我们把事件函数写成普通函数的形式时，如下 class Demo extends React.Component { state = { msg: 'hello react', } //普通函数形式 handleClick() { console.log(this.state.msg) } render() { return ( <div> <button onClick={this.handleCl
React-事件处理与this指向问题
cc2231293148的博客
12-15 448
这个对象和之前学习的事件对象所包含的方法和属性都基本一致，不同的是React中的事件对象并不是浏览器提供的，而是它自己内部所构建的。React元素的事件处理和DOM元素的很相似，但是有一点语法上的不同。React元素的事件绑定采用。在React里，类组件与函数组件绑定事件是差不多的，只是在类组件中绑定事件函数的时候需要用到。React中可以通过事件处理函数的参数获取到事件对象，它的事件对象叫做：合成事件，的方式来绑定一个事件，注意，这里和原生的事件是有区别的，，代表指向当前的类的引用，在函数中不需要调用。
react--this指向问题
qq_45410965的博客
12-10 320
react为事件绑定this
【react】jsx中，解决事件处理程序 this指向问题
呆呆狗
10-06 388
class Hello extends React.Component { state = { count: 0, } handleSum() { // 事件处理程序中的 this 是 undefined // 这个方法其实是 react 内部调用 ， 内部调用的时候，没有 正确绑定 this } render() { return ( <div>
关于react-native中FlatList的 this指向问题
halo1416的博客
08-16 1174
问题描述：在使用 FlatList 制作列表过程中，其 renderItem 属性返回的是一个 TouchableOpacity 的按钮，但是在触发其点击事件onPress时，总是报错！ FlatList代码： _renderItem渲染item的代码：   报错原因： TouchableOpacity的onPress中使用了this，但他是不存在的，应用在FlatList的...
一文详解React事件中this指向，面试必备
不懂先生的博客
01-24 1792
结论 先上结论 4种处理事件处理函数中this指向问题的方案 3种实现事件传参的解决方案 5种this指向方案的性能比较 两种最优解 需求 我们知道，在 react 中，事件处理函数中的this很容易丢失，如 class App extends React.Component { handleClick() { console.log(this);// undefined } render() { return <div onClick={this.handleCli
React-component-this-类组件及JS中this指向性问题
m0_65912225的博客
04-06 1078
React类组件中this指向性问题 JS中this指向性问题 1.普通函数 2.箭头函数 3.没有显式调用 4.严格模式 5.es6 class语法 React类组件中this指向性问题 <body> <script src="https://unpkg.com/react@17/umd/react.development.js" crossorigin></script> <script src="https://unpkg
React学习笔记 - 事件处理绑定this指向
绿胡子大叔的博客
02-09 426
React学习笔记 - 事件处理绑定this指向使用箭头函数使用`Function.prototype.bind()`public class fields 使用箭头函数 利用箭头函数自身没有作用域的特点，使用箭头函数处理this指向，但这种方法每次渲染都会创建一个新的函数 class App extends React.Component { constructor(){ this.state = { count: 0 } } render(){ return ( <s
react-electron-webpack:react-electron-webpack-Node.js-websocket的实践
05-06
package.json指向应用程序的主文件，并列出其详细信息和依赖项。 main.js启动应用程序并创建一个浏览器窗口以呈现HTML。 这是应用程序的主要过程。 index.html要呈现的网页。 这是应用程序的渲染过程。 您可以在...
react-react面试题之事件绑定方式.zip
03-20
这种方式在组件实例化时会执行一次`bind`，确定`this`指向，避免了箭头函数的问题。但`bind`操作也会增加额外的性能开销。 4. **构造器中预绑定：** 为了优化性能，可以在构造函数中预先绑定事件处理函数，如`this...
React学习笔记之事件处理（二）
08-30
在React的类组件中，事件处理通常需要确保`this`关键字指向正确的组件实例。为了达到这一目的，我们需要在构造函数中调用`super(props)`之后，手动使用`bind(this)`方法来绑定`this`。以下是一个`Toggle`组件的例子...
React 知识点（一）
措手不及ya的博客
08-05 617
React 使用，三、创建元素练习，JSX 使用，JSX 嵌入表达式，JSX条件渲染方式，JSX 列表渲染，JSX样式-style 操作，JSX样式-className 方式
react有什么特点
weixin_56187723的博客
08-02 526
React是一个由Facebook开发并维护的JavaScript库，主要用于构建用户界面。
react如何父子组件传参
最新发布
ggq53219的博客
08-05 345
在React中，父子组件之间的传参主要通过props（属性）来实现。子组件通过props接收来自父组件的数据，而父组件则可以通过在子组件标签上设置属性（即props）来传递数据。下面是一个简单的例子来说明这个过程。
React 常用 Hooks 和使用的易错点
qq_25416827的博客
08-05 303
typescript复制代码const memoizedValue = useMemo(() => computeExpensiveValue(a, b), [a, b]);typescript复制代码const memoizedCallback = useCallback(() => {中没有正确地清理副作用，导致内存泄漏。中忘记依赖数组，导致没有性能优化效果。中忘记依赖数组，导致无限循环。：性能优化，记住计算结果。：性能优化，记住函数定义。函数中返回新的状态对象。中返回一个清理函数。
react的事件处理为什么要bind this 改变this的指向？
06-06
在 React 中，事件处理程序默认情况下不会绑定 `this` 的值，因此当事件被触发时，`this` 将指向 `undefined` 或全局对象，这可能会导致错误。为了避免这种情况，我们需要手动绑定 `this` 的值。其中一种方法是使用 ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值