react之事件绑定（this、传参）

一、事件绑定函数中this

默认情况下，this指向undefined

import React from 'react'
export default class ThingBind extends React.Component{constructor(){super()}console(){console.log(this)//输出undefined}render(){return(<button onClick={this.console}>点击</button>)}
}

但实际开发中，我们需要事件函数中的this指向当前组件对象，有下面几种解决方案
第一种：声明函数时候使用箭头函数

import React from 'react'
export default class ThingBind extends React.Component{constructor(){super()}console=()=>{console.log(this)//输出ThingBing{...}}render(){return(<button onClick={this.console}>点击</button>)}
}

第二种：使用bing，在构造函数中绑定this或者直接在绑定事件时绑定this

import React from 'react'
export default class ThingBind extends React.Component{constructor(){super()this.console=this.console.bind(this)}console(){console.log(this)//输出ThingBing{...}}render(){return(<button onClick={this.console}>点击</button>// <button onClick={this.console.bind(this)}>点击</button>)}
}

二、传参

第一种：绑定事件时候使用箭头函数

import React from 'react'
export default class ThingBind extends React.Component{constructor(){super()}console(msg){console.log(msg)//我是参数}render(){return(<button onClick={()=>this.console('我是参数')}>点击</button>)}
}

第二种：/2.通过bind修改this并且传参

import React from 'react'
export default class ThingBind extends React.Component{constructor(){super()}console(msg){console.log(msg)//我是参数}render(){return(<button onClick={(this.console.bind(this,'我是参数'))}>点击</button>)}
}

react之事件绑定（this、传参）相关推荐

微信小程序基础而重要语法整理总结（数据绑定、运算表达式、循环渲染、条件渲染、事件绑定（传参））
目录数据绑定运算表达式循环渲染条件渲染事件绑定(传参) 首先对初始化后的小程序目录进行梳理(图来自某机构) 补充: sitemap配置:小程序根目录下的sitemap. json文件用来配置 ...
Vue.js-Day01-PM【事件绑定(事件传参、事件对象、传参+获取事件对象)、样式处理操作(模板、事件、属性绑定)、Tab切换(原生js实现、Vue.js实现)、js中的this详解关键字】
Vue.js实训[基础理论(5天)+项目实战(5天)]博客汇总表[详细笔记] 目录 4.事件绑定 4.1.事件绑定(点击.双击.鼠标移动) 点击按钮-最简单的事件绑定(无参函数) 格式点击按钮 ...
深入解析react关于事件绑定this的四种方式
这篇文章主要介绍了详解react关于事件绑定this的四种方式,写的十分的全面细致,具有一定的参考价值,对此有需要的朋友可以参考学习下.如有不足之处,欢迎批评指正. 在react组件中,每个方法的上下 ...
React学习:事件绑定、组件定义、for、map循环-学习笔记
文章目录 React学习:事件绑定.组件定义.for.map循环-学习笔记事件绑定组件定义 (参数传递) for.map循环 React学习:事件绑定.组件定义.for.map循环-学习笔记事件 ...
react事件组件设计传参使用
1.事件和原生js事件一致事件命名用驼峰式 onclick onClick onmouseover onMouseover 事件总是要响应一个函数 render() {return ( <d ...
React自定义组件使用onClick传参注意:onClick只是一个名字而已!
核心: React自定义组件不是真实DOM,所以没有onClick属性, 如果对React自定义组件写上onClick,也只是个单纯的名字而已,onClick的值作为props传到子组件. 例如: f ...
js解决动态绑定事件时不能传参的问题
问题描述: js使用dom给元素绑定事件时如果直接传入参数, 会有传参失败并且语句会执行并没有成功绑定事件的情况举个例子,假如我们有一个div (id="div1"), 我们想给 ...
Vue3（撩课学院）笔记01-创建实例对象，v-for遍历，时间绑定，传参，时间修饰符，计算属性，v-if，v-show，深拷贝，v-model与各类表单的绑定
1.创建vue实例对象 <!DOCTYPE html> <html lang="en"> <head><meta charset=&quo ...
JSX详解React的事件绑定事件参数的传递
一.认识JSX 这段element变量的声明右侧赋值的标签语法是什么呢? 它不是一段字符串(因为没有使用引号包裹),它看起来是一段HTML原生,但是我们能在js中直接给一个变量赋值html吗? 其实是 ...

react之事件绑定（this、传参）

一、事件绑定函数中this

二、传参

react之事件绑定（this、传参）相关推荐

最新文章

热门文章