react中用箭头函数解决自定义函数中this指向问题

于 2022-11-18 12:58:44 发布
阅读量279 收藏
点赞数
文章标签： react.js javascript 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_45833524/article/details/127920302
版权 
 <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script src="../study/react.development.js" ></script>
    <script src="../study/react-dom.development.js"></script>
    <script src="../study/babel.min.js"></script>
    <!-- 加载 React 组件。-->
    <!-- <script src="like_button.js"></script> -->
    <style>
        .style{
            color: blue;
        }
    </style>
    <script type="text/babel">
    //   点击天气修改天气状态 热/冷
    class Weather extends React.Component{
        constructor(props){
            super(props)
        }
        a = 3;
        state={
                isHot:false
            }
        // 箭头函数解决this指向问题，会自动向外找this
         demo = ()=>{
            this.setState({isHot:!this.isHot})
            console.log(this)
        }
        render() {
            return <h1 onClick={this.demo}>今天天气:{this.state.isHot?'热':'冷'}</h1>
        }
    }
    ReactDOM.render(<Weather/>,document.getElementById('test'))
    </script>
    <div id="test"></div>
</body>
</html>
qq_45833524
关注
React学习(五)-React中组件的数据-props
itclanCoder
08-11 3073
虽互不曾谋面,但希望能和你成为笔尖下的朋友以读书,技术,生活为主,偶尔撒点鸡汤不作,不敷衍,意在真诚吐露,用心分享点击左上方,可关注本刊撰文| 川川ID:suibichuanji点击下方小程序可看视频点击文末左下方阅读原文,可看更多内容（点击小程序,可看视频） 前言开发一个React应用,更多的是在编写组件,而Reac...
前端面试项目总结+this指向总结
qiao_qiao_happy的博客
03-03 1522
1. 做过的工作比较有创意的地方或者亮点 2020.01-2020.12 AIZOO 可视化机器学习平台 项目介绍：实现用户自定义上传算法模型和数据资源，通过可视化界面拖拽组件构建模型，提交任务，使用 slurm 集群管理自动部署模型训练，查看训练结果以及分析图表等的一站式机器学习平台。 负责内容： (1) 前端开发：采用 Vue 框架+iview 组件库，基于 WebSocket 即时通讯和 Echarts 图表库绘制 动态折线图，通过 API 接口与 Java 后台交互。 (2) 可视化构建模型：使用
React:JS中的this和箭头函数
weixin_30877227的博客
02-13 395
JS中的this和纯面向对象（java，c++）中的this有点不大一样，其原因就是作用域不同，导致JS中的this的指向不明确，在java中的this指当前对象的this或当前类的this，在JS中function(){}里面没有特殊指定this的指向，这里的this时指向Window，但是在严格模式下，function(){return this}里面的this是undefined，...
react组件中箭头函数的使用
roymustang的博客
01-18 4199
文章目录1概念2this指向三、箭头函数不能改变this指向四、箭头函数的调用（这边以React组件举例） 1概念 箭头函数是匿名函数的另一种表达形式，简化写法。 // 普通函数 const fun = function() {} // 把匿名函数的引用地址赋值给了fun变量 箭头函数为 // 箭头函数 const fun = () => {} 举例 const oDiv = document.querySelector('div'); // 普通函数 oDiv.addEventL
React事件处理中this使用解决办法：箭头函数+class fields语法
weixin_43260489的博客
09-15 1559
前言 在React中，我们对事件命名采用小驼峰式（camelCase），而不是纯小写。 传统HTML、React中JSX写法： // 传统html <button onclick="handleClickBtn()">按钮</button> // React JSX <button onClick={handleClickBtn}>按钮</button> 在传统HTML写法里，onclick="handleClickBtn()"，引号内部是js代码，当触发事
React 中 this 详解
chenshun123的博客
01-08 3419
JavaScript 中的作用域 scope 和上下文 context 是这门语言的独到之处，每个函数有不同的变量上下文和作用域。这些概念是 JavaScript 中一些强大的设计模式的后盾。在 ES5规范里，可以遵循一个原则，即每个 function内的上下文this 指向该 function的调用方，比如 : var Module = {     name: 'Jafeney',  
react中this的指向问题
imkaifan的博客
08-25 241
export class Shijian extends React.Component { constructor() { super(); //es6里面规定的，构造函数里必须这个super函数 this.state = { count: 10 } } render() { return (<div> <h1>计数器:{this.state.co
React教程（详细版）
m0_54853146的博客
03-08 2万+
一、简介（背景） 本文篇幅较多，建议耐心看完，我相信多少会对你有所帮助! 1.1、概念 它是一个将数据渲染为HTML视图 的js库 1.2、原生js痛点 用dom的API去操作dom，繁琐且效率低 用js直接操作dom，浏览器会进行大量的回流和重绘 原生js没有组件化的编程方案，代码复用性低，哪怕有模块话的概念，但模块化也只能拆解一个个js，对样式和结构也没办法拆解，组件化就相当于3剑客整体拆解，成为一个个的小功能 1.3、React特点 采用组件化模式，声明式编码，提高开发效率和组件复用性 在R
【尚硅谷React】——React全家桶笔记
m0_67393342的博客
07-29 4065
用于构建用户界面的JavaScript库（只关注页面），将数据渲染为HTML视图；由Facebook开发且开源。中文官网英文官网原生JS操作DOM繁琐且效率低，因为用DOM-API操作UI；JS直接操作DOM会使浏览器进行大量的重绘重排；原生JS没有组件化编码方案，代码复用率低react开发者工具Chrome插件ReactDeveloperTool（注意安装来源为facebook的）方法一在package.json中追加如下配置"proxy""http5000"优点方法二第一步。...
react 中事件中 绑定this 的 4 种写法，以及箭头函数绑定会出现的问题
冲锋
04-30 2448
参考react官方文档事件 第一种： 箭头函数绑定（需要传参数）onClick={() => this.handleClick(index)} import React, { Component } from "react"; class App extends Component { constructor(props) { super(props); this...
一文详解React事件中this指向，面试必备
不懂先生的博客
01-24 1831
结论 先上结论 4种处理事件处理函数中this指向问题的方案 3种实现事件传参的解决方案 5种this指向方案的性能比较 两种最优解 需求 我们知道，在 react 中，事件处理函数中的this很容易丢失，如 class App extends React.Component { handleClick() { console.log(this);// undefined } render() { return <div onClick={this.handleCli
react合成事件——bind解决this指向——箭头函数解决this指向
阿牛哥的博客
09-20 603
合成事件——bind解决this指向——箭头函数解决this指向
关于箭头函数中的this的指向
热门推荐
xu4321083的博客
03-30 4万+
普通函数中的this:1. this总是代表它的直接调用者(js的this是执行上下文), 例如 obj.func ,那么func中的this就是obj2.在默认情况(非严格模式下,未使用 'use strict'),没找到直接调用者,则this指的是 window (约定俗成)3.在严格模式下,没有直接调用者的函数中的this是 undefined4.使用call,apply,bind(ES5新...
React绑定this的三种方式
大灰狼的小绵羊哥哥的博客
02-24 1万+
React可以使用React.createClass、ES6 classes、纯函数3种方式构建组件。使用React.createClass会自动绑定每个方法的this到当前组件，但使用ES6 classes或纯函数时，就要靠手动绑定this了。接下来介绍React中三种绑定this的方法 bind() Function.prototype.bind(thisArg [, arg1 [
React事件绑定的几种方式对比
weixin_34348111的博客
09-22 330
React事件绑定 由于类的方法默认不会绑定this，因此在调用的时候如果忘记绑定，this的值将会是undefined。通常如果不是直接调用，应该为方法绑定this。绑定方式有以下几种： 1. 在构造函数中使用bind绑定this class Button extends React.Component { constructor(pr...
React的箭头函数详解
ZPHTTT的博客
12-07 9517
基本用法： ES6中允许使用“箭头”(=&gt;)定义函数 var f   = v =&gt; v; 上面代码相当于： var f = function( v )  {     return v; } 根据箭头函数有参数和无参数来区分 1、无参数的箭头函数 var f = () =&gt; 5; 等同于 var f = function() { return 5}; 2、有参数...
深入理解React中的上下文this
思诚^_^
07-19 1万+
写在前面JavaScript中的作用域scope 和上下文 context 是这门语言的独到之处，每个函数有不同的变量上下文和作用域。这些概念是JavaScript中一些强大的设计模式的后盾。在ES5规范里，我们可以遵循一个原则——每个function内的上下文this指向该function的调用方。比如：var Module = { name: 'Jafeney', first:
react native 绑定this的几种方式
非動ご博客
09-12 1595
对于react native 绑定this，我将其归类为以下四种方式： bind 箭头函数 ::运算符 使用箭头函数定义函数 首先明确观点，我向大家推荐第四种方式： 1.bind class TestBind extends React.Component { constructor(props) { super(props); this.s...
React 、箭头函数、bind、this小事记
xishuiinsz的博客
11-20 431
今天在react项目中使用somefunc.bind(this)语法，但在somefunc方法内部，this却是undefined, 甚是郁闷！后来灵机一动，是不是箭头函数搞的鬼。立马将箭头函数变更为标准function函数，this立马指向了调用somefunc方法的实例环境。 ...
React组件的this解析与函数调用者影响
为了避免这种情况，我们需要在构造函数中使用`.bind(this)`或者使用箭头函数定义这些方法，确保`this`指向组件实例。 ```jsx // 错误示例：handler未绑定，this可能为undefined handler() { console.log('handler'...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值