首页 > 其他分享 >react里面bind与箭头函数

react里面bind与箭头函数

时间:2024-05-09 09:22:09浏览次数:16  
标签:函数 指向 bind react 箭头 点击 handleClick

  1. bind 由于在类中,采用的是严格模式,所以事件回调的时候,会丢失this指向,指向undefined,需要使用bind来给函数绑定上当前实例的this指向;
    箭头函数的this指向上下文,所以永久能拿到当前组件实例,this指向,我们可以完美的使用箭头函数来替代传统事件处理函数的回调

  2. 箭头函数
    class MyComponent extends React.Component {
    handleClick = () => {
    // 处理点击事件的代码
    }

render() {
return (

);
}
}

3 bind
class MyComponent extends React.Component {
constructor(props) {
super(props);
this.handleClick = this.handleClick.bind(this);
}

handleClick() {
// 处理点击事件的代码

原文链接:https://blog.csdn.net/qq_39207066/article/details/133678289

标签:函数,指向,bind,react,箭头,点击,handleClick
From: https://www.cnblogs.com/zw100655/p/18181358

相关文章

  • SwiftUI State,Binding 状态管理
    代码////ContentView.swift//SwiftUIState////CreatedbyCHENHaoon2024/5/8.//importSwiftUIstructContentView:View{@StateprivatevarisPlaying=false@StateprivatevarclickNumber1=0@StateprivatevarclickNumber2=0......
  • Elements in iteration expect to have 'v-bind:key' directives.
    当组件中使用v-for时,如果不指定key,则会有红色警告信息。解决方案如下。方案一:绑定key(亲试有效)//方式一<liv-for="(item,index)inlist":key="index">//方式二<liv-for="(item,index)inlist":key="item.id">//方式三<liv-for="(item,in......
  • react理论总结1
     1)对react的理解(特点)1,Jsxjs+xml,是对js语法的扩张,需要通过babel.js的编译转化成浏览器可以解析的普通js对象2,虚拟dom。相当于在js和真实dom之间的缓存,state改变调用render函数会重新生成新的虚拟dom树,通过diff算法计算出新旧dom差异 只能差异部分更新到真实的dom,减少......
  • react ts 项目如何配置路径别名?
    tsconfig.json{"compilerOptions":{"baseUrl":".",//路径配置"paths":{"@/*":["src/*"]},"target":"ES2020","lib":[......
  • React Hooks 入门教程【阮一峰】
    组件类的缺点React的核心是组件。早前版本,组件的标准写法是类。//一个简单的组件类importReact,{Component}from"react";exportdefaultclassButtonextendsComponent{constructor(){super();this.state={buttonText:"Clickme,please"};......
  • TS — 在React中使用TS(基础使用)
    在React中使用TypeScript(TS)是一种很常见的做法,因为TypeScript提供了静态类型检查和其他一些有用的功能,可以帮助您更好地开发和维护React应用。1.原始组件://SimpleComponent.jsimportReactfrom'react';constSimpleComponent=({name})=>{return<div>Hel......
  • react中的state值修改了,也触发了页面的重新渲染,但是视图没有更新,可能是什么原因?
    state更新的是一个值List,但是页面渲染使用的是List中的某一项(当前选中项curItem),也定义成了state,而更新状态时,只更新了List,忽视了当前选中项curItem的状态更新,导致视图没有更新,即使组件重新渲染了,但是视图中使用的是curItem解决方案:state中不要保存当前选中项curItem,而应该保......
  • 用这个开源工具在 React 中建立一个交互式时间轴
    用这个开源工具在React中建立一个交互式时间轴作者: KarolKozer 译者: LCTT geekpi |2023-02-2409:22     Planby是一个JavaScript组件,用于帮助创建流媒体服务、音乐和体育赛事等的时间表、时间线和电子节目指南(EPG)。几年来,我在电视在线和视频点播(VOD......
  • react useEffect可以作为watch监听值变化,进行其他操作用吗
    是的,React中的useEffectHook可以被用来作为“watch”监听特定变量或状态的变化,并在这些值发生变化时执行特定的操作。这是通过在useEffect的依赖数组中列出你想要监听的值来实现的。当依赖数组中的某个值发生变化时,useEffect的回调函数会被重新执行。下面是一个简单的例子,展示......
  • 一个pybind11的例子
    首先在当前文件夹下安装pybind11。然后编写以下3个文件:1、CMakeLists.txtcmake_minimum_required(VERSION3.5)project(exampleLANGUAGESCXX)add_subdirectory(pybind11)pybind11_add_module(barbar.cpp)2、foo.pyimportbarhello_world=bar.HelloWorl......