您的当前位置:首页正文

react事件绑定this的几种方式

时间:2023-11-30 来源:站点网

这次给大家带来react事件绑定this的几种方式,react事件绑定this的注意事项有哪些,下面就是实战案例,一起来看一下。

在react组件中,每个方法的上下文都会指向该组件的实例,即自动绑定this为当前组件,而且react还会对这种引用进行缓存,以达到cpu和内存的最大化。在使用了es6 class或者纯函数时,这种自动绑定就不复存在了,我们需要手动实现this的绑定

React事件绑定类似于DOM事件绑定,区别如下:

1.React事件的用驼峰法命名,DOM事件事件命名是小写

2.通过jsx,传递一个函数作为event handler,而不是一个字符串。

3.React事件不能通过返回false来阻止默认事件,需要显式调用preventDefault()

如下实例:

<a href="#" onclick="console.log('The link was clicked.'); return false">Click me</a>class ActionLink extends React.Component {constructor(props) {super(props);}handleClick(e) {e.preventDefault();console.log('The link was clicked.');}render() {return (<a href="#" onClick={this.handleClick.bind(this)}>Click Me...</a>);}}

ps:React组件类的方法没有默认绑定this到组件实例,需要手动绑定。

以下是几种绑定的方法:

bind方法

直接绑定是bind(this)来绑定,但是这样带来的问题是每一次渲染是都会重新绑定一次bind;

class Home extends React.Component { constructor(props) { super(props); this.state = { }; } del(){ console.log('del') } render() { return ( <p className="home"> <span onClick={this.del.bind(this)}></span> </p> ); }}

构造函数内绑定

在构造函数 constructor 内绑定this,好处是仅需要绑定一次,避免每次渲染时都要重新绑定,函数在别处复用时也无需再次绑定

class Home extends React.Component { constructor(props) { super(props); this.state = { }; this.del=this.del.bind(this) } del(){ console.log('del') } render() { return ( <p className="home"> <span onClick={this.del}></span> </p> ); }}

::不能传参

如果不传参数使用双冒号也是可以

class Home extends React.Component { constructor(props) { super(props); this.state = { }; } del(){ console.log('del') } render() { return ( <p className="home"> <span onClick={::this.del}></span> </p> ); }}

箭头函数绑定

箭头函数不仅是函数的'语法糖',它还自动绑定了定义此函数作用域的this,因为我们不需要再对它们进行bind方法:

class Home extends React.Component { constructor(props) { super(props); this.state = { }; } del=()=>{ console.log('del') } render() { return ( <p className="home"> <span onClick={this.del}></span> </p> ); }}

相信看了本文案例你已经掌握了方法,更多精彩请关注Gxl网其它相关文章!

推荐阅读:

JS生成二维码

JS实现微信号随机切换

String.prototype.format如何使用字符串拼接

小编还为您整理了以下内容,可能对您也有帮助:

React事件绑定的几种方法分享


本文主要给大家介绍了关于React学习之事件绑定的几种方法对比,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,希望能帮助大家更深掌握React事件绑定的方法。
React事件绑定

由于类的方法默认不会绑定this,因此在调用的时候如果忘记绑定,this的值将会是undefined。

通常如果不是直接调用,应该为方法绑定this。绑定方式有以下几种:
1. 在构造函数中使用bind绑定this

class Button extends React.Component {
constructor(props) {
super(props);
this.handleClick = this.handleClick.bind(this);
}
handleClick(){
console.log('this is:', this);
}
render() {
return (
<button onClick={this.handleClick}>
Click me
</button>
);
}
}2. 在调用的时候使用bind绑定this

class Button extends React.Component {
handleClick(){
console.log('this is:', this);
}
render() {
return (
<button onClick={this.handleClick.bind(this)}>
Click me
</button>
);
}
}3. 在调用的时候使用箭头函数绑定this

class Button extends React.Component {
handleClick(){
console.log('this is:', this);
}
render() {
return (
<button onClick={()=>this.handleClick()}>
Click me
</button>
);
}
}4. 使用属性初始化器语法绑定this(实验性)

class Button extends React.Component {
handleClick=()=>{
console.log('this is:', this);
}
render() {
return (
<button onClick={this.handleClick}>
Click me
</button>
);
}
}比较

方式2和方式3都是在调用的时候再绑定this。
优点:写法比较简单,当组件中没有state的时候就不需要添加类构造函数来绑定this
缺点:每一次调用的时候都会生成一个新的方法实例,因此对性能有影响,并且当这个函数作为属性值传入低阶组件的时候,这些组件可能会进行额外的重新渲染,因为每一次都是新的方法实例作为的新的属性传递。
方式1在类构造函数中绑定this,调用的时候不需要再绑定
优点:只会生成一个方法实例,并且绑定一次之后如果多次用到这个方法也不需要再绑定。
缺点:即使不用到state,也需要添加类构造函数来绑定this,代码量多一点。。
方式4:利用属性初始化语法,将方法初始化为箭头函数,因此在创建函数的时候就绑定了this。

优点:创建方法就绑定this,不需要在类构造函数中绑定,调用的时候不需要再作绑定。结合了方式1、方式2、方式3的优点
缺点:目前仍然是实验性语法,需要用babel转译

React事件绑定的几种方法分享


本文主要给大家介绍了关于React学习之事件绑定的几种方法对比,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,希望能帮助大家更深掌握React事件绑定的方法。
React事件绑定

由于类的方法默认不会绑定this,因此在调用的时候如果忘记绑定,this的值将会是undefined。

通常如果不是直接调用,应该为方法绑定this。绑定方式有以下几种:
1. 在构造函数中使用bind绑定this

class Button extends React.Component {
constructor(props) {
super(props);
this.handleClick = this.handleClick.bind(this);
}
handleClick(){
console.log('this is:', this);
}
render() {
return (
<button onClick={this.handleClick}>
Click me
</button>
);
}
}2. 在调用的时候使用bind绑定this

class Button extends React.Component {
handleClick(){
console.log('this is:', this);
}
render() {
return (
<button onClick={this.handleClick.bind(this)}>
Click me
</button>
);
}
}3. 在调用的时候使用箭头函数绑定this

class Button extends React.Component {
handleClick(){
console.log('this is:', this);
}
render() {
return (
<button onClick={()=>this.handleClick()}>
Click me
</button>
);
}
}4. 使用属性初始化器语法绑定this(实验性)

class Button extends React.Component {
handleClick=()=>{
console.log('this is:', this);
}
render() {
return (
<button onClick={this.handleClick}>
Click me
</button>
);
}
}比较

方式2和方式3都是在调用的时候再绑定this。
优点:写法比较简单,当组件中没有state的时候就不需要添加类构造函数来绑定this
缺点:每一次调用的时候都会生成一个新的方法实例,因此对性能有影响,并且当这个函数作为属性值传入低阶组件的时候,这些组件可能会进行额外的重新渲染,因为每一次都是新的方法实例作为的新的属性传递。
方式1在类构造函数中绑定this,调用的时候不需要再绑定
优点:只会生成一个方法实例,并且绑定一次之后如果多次用到这个方法也不需要再绑定。
缺点:即使不用到state,也需要添加类构造函数来绑定this,代码量多一点。。
方式4:利用属性初始化语法,将方法初始化为箭头函数,因此在创建函数的时候就绑定了this。

优点:创建方法就绑定this,不需要在类构造函数中绑定,调用的时候不需要再作绑定。结合了方式1、方式2、方式3的优点
缺点:目前仍然是实验性语法,需要用babel转译

React:引入class关键字后this的绑定问题

使用 React.createClass 会自动绑定每个方法的this到当前组件,但使用 ES6 class 关键字时,这种自动绑定功能就没有,需要手动绑定 this 。不然的话,经常出现 this 是 undefined 的现象。
比如下面的 test2 中的 this 指向就不正确了。

解决方案一:采用箭头函数
箭头函数将this和函数定义时的上下文绑定,能达到期望的效果。

解决方案二:在回调响应的地方手动绑定

解决方案三:构造函数中手动绑定

React.createClass 估计采用的就是这种方案,构造函数将所有的function成员都自动绑定一下。

React绑定this的三种方式

理解React中es6方法创建组件的this

React中使用ES6 class的this指向?

React:引入class关键字后this的绑定问题

使用 React.createClass 会自动绑定每个方法的this到当前组件,但使用 ES6 class 关键字时,这种自动绑定功能就没有,需要手动绑定 this 。不然的话,经常出现 this 是 undefined 的现象。
比如下面的 test2 中的 this 指向就不正确了。

解决方案一:采用箭头函数
箭头函数将this和函数定义时的上下文绑定,能达到期望的效果。

解决方案二:在回调响应的地方手动绑定

解决方案三:构造函数中手动绑定

React.createClass 估计采用的就是这种方案,构造函数将所有的function成员都自动绑定一下。

React绑定this的三种方式

理解React中es6方法创建组件的this

React中使用ES6 class的this指向?

this的绑定与丢失问题

this 四种绑定

1、new绑定:new方式是优先级最高的一种调用方式,构造函数只是一些使用new操作符时被调用的函数。
只要使用new方式调用一个构造函数,this一定指向new调用函数新创建的对象。

使用new来调用函数的时候会自动执行下面的操作:
①、创建(或这说构造)一个全新的对象
②、这个新的对象会被执行[[Prototype]]连接
③、这个新对象会绑定到函数调用的this。
④、如果函数没有返回其他对象,那么new表达式中的函数调用会自动返回这个新对象

2、显式绑定:显式绑定是通过call()和apply()方法强制制定某些对象对函数进行调用,this则强制指向 调用函数的对象。

显式绑定中强制绑定---硬绑定(解决隐式绑定丢失问题)

创建了函数bar()并在内部手动调用了foo.call(obj),因此强制把foo的this绑定到了obj上。无论之后如何调用bar,总会手动在obj上调用foo。 硬绑定的典型应用场景就是创建一个包裹函数,负责接收参数并返回值

另一种 使用方法是创建一个可以重复的辅助函数

由于硬绑定的使用很多,在ES5中提供了内置的方法Function.prototype.bind

bind(...)会返回一个硬编码的新函数,它会把你指定的参数设置为this的上下文并调用原始函数。

3、隐式绑定:指通过为对象添加属性,该属性的值即为要调用的函数,进而使用该对象调用函数

4、默认绑定:其他规则无法应用的时候

1、隐式丢失:在隐式绑定时,使用了依次引用赋值或者传参操作。丢失之后会使用默认绑定,把this绑定到全局对象或者undefined上,取决于是否是严格模式。

①、引用赋值

newData实际上引用的是foo本身,相当于var newData = foo;
data对象作为中间桥,data.foo起传递作用,newData与data没有关系,newData本身没有a属性
newData()输入的是window下的属性a的值。
②、参数传递

参数传递其实就是一种隐式赋值,因此我们传入的函数也会被隐式赋值。
如果把函数传入内置的函数中结果是一样的

回调含糊丢失this绑定是非常常见的。也有可能存在调用回调函数的函数可能会修改this。
在一些流行的JavaScript库中事件处理器常会把回调函数的this强制绑定到触发事件的DOM元素上

2、间接引用:指一个对象的方法引用了另一个对象存在的方法。此时的this指向window或者undefined

判断使用默认规则不是调用函数位置是否处于严格模式下,而是整个函数体是否处于严格模式,

3、=> 使用词法作用域取代传统的this机制,无法使用上述所说的this的优先级原则
注:=>函数中,根据外层父亲作用域来决定this的指向问题。

foo()内部创建的箭头函数会捕获调用foo()时的this,由于foo()的this绑定到obj1上,bar(引用箭头函数)的this
也会绑定到obj1上,箭头函数的绑定无法被修改。(new 也不行!)

this的绑定与丢失问题

this 四种绑定

1、new绑定:new方式是优先级最高的一种调用方式,构造函数只是一些使用new操作符时被调用的函数。
只要使用new方式调用一个构造函数,this一定指向new调用函数新创建的对象。

使用new来调用函数的时候会自动执行下面的操作:
①、创建(或这说构造)一个全新的对象
②、这个新的对象会被执行[[Prototype]]连接
③、这个新对象会绑定到函数调用的this。
④、如果函数没有返回其他对象,那么new表达式中的函数调用会自动返回这个新对象

2、显式绑定:显式绑定是通过call()和apply()方法强制制定某些对象对函数进行调用,this则强制指向 调用函数的对象。

显式绑定中强制绑定---硬绑定(解决隐式绑定丢失问题)

创建了函数bar()并在内部手动调用了foo.call(obj),因此强制把foo的this绑定到了obj上。无论之后如何调用bar,总会手动在obj上调用foo。 硬绑定的典型应用场景就是创建一个包裹函数,负责接收参数并返回值

另一种 使用方法是创建一个可以重复的辅助函数

由于硬绑定的使用很多,在ES5中提供了内置的方法Function.prototype.bind

bind(...)会返回一个硬编码的新函数,它会把你指定的参数设置为this的上下文并调用原始函数。

3、隐式绑定:指通过为对象添加属性,该属性的值即为要调用的函数,进而使用该对象调用函数

4、默认绑定:其他规则无法应用的时候

1、隐式丢失:在隐式绑定时,使用了依次引用赋值或者传参操作。丢失之后会使用默认绑定,把this绑定到全局对象或者undefined上,取决于是否是严格模式。

①、引用赋值

newData实际上引用的是foo本身,相当于var newData = foo;
data对象作为中间桥,data.foo起传递作用,newData与data没有关系,newData本身没有a属性
newData()输入的是window下的属性a的值。
②、参数传递

参数传递其实就是一种隐式赋值,因此我们传入的函数也会被隐式赋值。
如果把函数传入内置的函数中结果是一样的

回调含糊丢失this绑定是非常常见的。也有可能存在调用回调函数的函数可能会修改this。
在一些流行的JavaScript库中事件处理器常会把回调函数的this强制绑定到触发事件的DOM元素上

2、间接引用:指一个对象的方法引用了另一个对象存在的方法。此时的this指向window或者undefined

判断使用默认规则不是调用函数位置是否处于严格模式下,而是整个函数体是否处于严格模式,

3、=> 使用词法作用域取代传统的this机制,无法使用上述所说的this的优先级原则
注:=>函数中,根据外层父亲作用域来决定this的指向问题。

foo()内部创建的箭头函数会捕获调用foo()时的this,由于foo()的this绑定到obj1上,bar(引用箭头函数)的this
也会绑定到obj1上,箭头函数的绑定无法被修改。(new 也不行!)

React方向:元素添加事件以及react组件

方法一:外部定义函数

方法二:使用箭头函数添加

react中的组件在概念上来说是类似于JavaScript函数(即"props"),并返回用于页面展示的内容React元素

所谓的无状态组件,是指的其定义的值,无法被react监听到。

此处ele只是一个普通的变量,是没有状态的,区分组件的一个标准就是判断组件是否有状态的加入,状态即是数据,在Vue中状态管理器Vuex即被称为状态管理器,实际上就是对数据的一个存储器,React中的状态也等同于数据的操纵,让数据驱动视图的响应。

在react中定义组件最简单的方式就是去使用js的函数。
当react为用户自定义组件时,它会将JSX所接收的属性以及子组件(children)转换为单个对象传递给组件,这个对象就被称之为“props”

基于类并且继承父类React组件,子类就能使用react所提供的特性。
construct中使用super()调用父类构造函数来初始化子类实例,super之前只是不能使用this,因为当前实例的父类构造函数没有执行,不具有父类的能力。

React方向:元素添加事件以及react组件

方法一:外部定义函数

方法二:使用箭头函数添加

react中的组件在概念上来说是类似于JavaScript函数(即"props"),并返回用于页面展示的内容React元素

所谓的无状态组件,是指的其定义的值,无法被react监听到。

此处ele只是一个普通的变量,是没有状态的,区分组件的一个标准就是判断组件是否有状态的加入,状态即是数据,在Vue中状态管理器Vuex即被称为状态管理器,实际上就是对数据的一个存储器,React中的状态也等同于数据的操纵,让数据驱动视图的响应。

在react中定义组件最简单的方式就是去使用js的函数。
当react为用户自定义组件时,它会将JSX所接收的属性以及子组件(children)转换为单个对象传递给组件,这个对象就被称之为“props”

基于类并且继承父类React组件,子类就能使用react所提供的特性。
construct中使用super()调用父类构造函数来初始化子类实例,super之前只是不能使用this,因为当前实例的父类构造函数没有执行,不具有父类的能力。

react 的路由组件是如何传参的?

React Router 提供了三种方式来传递参数:params、query 和 state。其中,params 传参是通过在路由上配置参数,然后在组件中使用 this.props.match.params 获取参数的方式。query 传参是通过在 Link 组件中设置 query 属性,然后在组件中使用 this.props.location.search 获取参数的方式。state 传参是通过在 Link 组件中设置 state 属性,然后在组件中使用 this.props.location.state 获取参数的方式 。

在React中如何实现组件内部通信

这篇文章主要介绍了React数据传递之组件内部通信的方法,现在分享给大家,也给大家做个参考。

1. 概述

脱离初级前端一段时间后会发现,写样式的时间越来越少,处理数据的时间越来越多。处理数据的过程也就是实现业务逻辑的过程,这在项目中无疑是最重要的。

所以学习前端框架,了解完基本语法后,接下来就要学习其如何进行数据传递。

Angular 设计之初的一大亮点就是实现了数据的双向绑定,使用 Vue 一段时间后发现,所谓数据的双向绑定,组件内部唯一的应用场景就是 form 表单(input,textarea,select, radio),而这种场景下的数据双向绑定,即便框架内部没有实现,自己实现起来也非常简单。明白这一点后感觉之前认为 React 没有实现数据双向绑定很 low 的想法很幼稚。

对于 React 的数据传递,涉及两方面的内容:

组件内部的数据传递,典型的应用场景包括如何实现 form 表单双向数据绑定、如何绑定事件;

组件间的数据传递。 包括父组件往子组件传递数据、子组件往父组件传递数据以及兄弟组件之间传递数据。

本文先讨论组件内部的数据传递。

2. 组件内部数据传递

React 组件内部通信主要分为两部分:数据展示与事件处理。

2.1 数据展示

组件内部数据的展示和更新都是通过 state 来实现的,如果要使用 state 必须使用 ES6 的 class 定义组件。数据更新在双向数据绑定部分探讨,这部分仅讨论展示初始化数据。

如果你熟悉 Vue,React 的 state 对象相当于 Vue 的 data 对象

下面是一个纯展示数据的示例:

class App extends Component {

constructor(props) {

super(props);

// 初始化 state

this.state = {

inputValue: "test",

};

}

render() {

// 注意,在 react 中,DOM 元素是对象,所以使用‘()'包住

return (

<p className="App">

<p>{this.state.inputValue}</p>

</p>

);

}

}在通过 class 定义的 React 组件中,除了生命周期钩子函数, constructor() 和 render() 着两个方法也是自动执行的,先执行 constructor() ,执行 constructor() 的同时也是再为 render() 渲染 DOM 做数据准备。

实际上 constructor() 函数是组件生命周期中调用的第一个函数。

2.2 事件

2.2.1 与 DOM 中事件的异同

在 React 中处理事件和在 DOM 中处理事件类似,有两点不同:

React 中通过驼峰命名法命名事件,而不是全是小写字母;

在 JSX 中直接传递函数作为事件处理程序,而不是字符串。

第 2 点不同有坑,后面细说

举个例子,HTML中的事件:

<button onclick="activateLasers()">

Activate Lasers

</button>React 中的事件:

// 因为 jsx 中'{}'里面代表函数表达式,

// 所以传递给 onClick 的实际是函数 activateLasers 的函数体部分,

// 因此需要指定 this 指向,不然会报错

<button onClick={activateLasers}>

Activate Lasers

</button>2.2.2 存在的坑

直接传递 function 作为 event handler 需要指定函数的执行环境,即需要手动绑定 this ,不然会报 this 为 undefined 的错。见下面的例子:

class App extends Component {

constructor(props) {

super(props);

this.state = {

isToggleOn: true,

};

// 手动绑定 this

this.handleClick = this.handleClick.bind(this);

}

handleClick() {

// 如果不在 constructor() 方法中手动绑定 this,直接将其作为事件处理程序 this 为 undefined

console.log(this);

this.setState(prevState => ({

isToggleOn: !prevState.isToggleOn

}));

}

render() {

return (

<p className="App">

<button onClick={this.handleClick}>

{this.state.isToggleOn ? "on" : "off"}

</button>

</p>

);

}

}2.2.3 为什么会有坑

React 官网 说这个锅要 JS 原生语法来背,其实不尽然,React 实在 JS 语法早已确定的情况下设计了这样的事件系统,如果一定要有人站出来背锅,他们五五分吧。

1, JS原生语法存在的问题

JS语法中有这样的规则:如果将一个函数的函数体(没有 () )赋值给另一个变量,函数体内部的 this 指向可能会发生变化。会不会变化取决于函数和被赋值的变量是否处于同一个作用域(相同的执行环境)中,但实际使用中,将一个函数赋值给相同作用域的变量没有意义,那样的话直接使用那个函数就好,没必要在赋值给另一个变量。

this 指向不发生改变的没有意义的例子(为了方便说明,直接使用 var 操作符):

var fn = function () {

console.log(this);

};

var a = fn;

fn(); // window

a(); // window

this 指向发生改变的例子:

var fn = function () {

console.log(this);

};

// 将函数体赋值给一个对象的属性,函数执行时 this 和定义时指向不同

var o = {

a: fn,

};

fn(); // window

o.a(); // o,即{a:f}如果想要在将函数体赋值另一个变量的同时把原函数的 this 指向也一块赋值过去,就需要在赋值的过程中进行绑定 this 的操作,如下:

var fn = function () {

console.log(this);

};

// fn 在赋值的同时将内部的 this 打包一块赋值给了 a

var o = {

a: fn.bind(this),

};

fn(); // window

o.a(); // window通常在将函数体赋值给变量的时候为了避免 this 出错,都会进行 绑定执行环境的操作 ,典型的例子是 var bindId = document.getElementById.bind(document)

2, JSX 存在的问题

因为 JSX 中 DOM 元素也是对象,给元素的属性赋值实际是给 DOM 元素对象的属性赋值,见下:

const element = (

<button onClick={this.handleClick}>click me</button>

);等同于

const element = {

type: 'button',

props: {

onClick: this.handleClick,

children: 'click me',

},

};

这实际就是 将函数体赋值给一个对象的属性,函数执行时 this 和定义时指向不同 的场景,和原生语法相同的是 this 指向发生了改变,不同的是原生 JS 中不管怎样, this 总归是有个指向的,而 JSX 直接 undefined 。

所以说不绑定 this 报 undefined 的错不能全怪 JS 原生语法。

3. 双向数据绑定

通过 state 传递数据加上事件处理程序便能实现数据的双向绑定,其背后的思想是(以 input 为例):初始化时将 state 中预定义的 state a 赋值给 input,当 input 的 value 发生改变时,触发事件处理程序,将改变后的 value 赋值给状态 a ,React 监测到 state 改变时重新调用 render() 方法,即重新渲染组件,达到双向绑定的目的。

class App extends Component {

constructor(props) {

super(props);

this.state = {

inputValue: "test",

};

this.changeInput = this.changeInput.bind(this);

}

changeInput(e) {

// 将改变后的 input 值赋值给 inputValue,通过事件对象 $event.target.value 实现

this.setState({

inputValue: e.target.value

});

}

render() {

// input 改变时触发 changeInput

return (

<p className="App">

<input value={this.state.inputValue} onChange={this.changeInput} />

<p>{this.state.inputValue}</p>

</p>

);

}

}这里用到了事件对象,React 的事件对象和 JS 原生事件对象保持一致。

上面是我整理给大家的,希望今后会对大家有帮助。

相关文章:

使用Node.js爬虫如何实现网页请求

使用VueAwesomeSwiper容易出现的问题?

在angular2中有关Http请求原理(详细教程)

在node中如何实现http小爬虫

站点网还为您提供以下相关内容希望对您有帮助:

React学习之事件绑定的几种方法对比

绑定方式有以下几种:1. 在构造函数中使用bind绑定thisclass Button extends React.Component {constructor(props) { super(props); this.handleClick = this.handleClick.bind(this); } handleClick(){ console.log('this...

react表单和绑定事件及state和props-04

第一种方式:在事件上使用bind(this)第二种方式:在构造函数中改变this指向 第三种方式:使用=()=&gt; JavaScript函数中的this不是在函数声明的时候定义的,而是在函数调用(即运行)的时候定义的。在react中也遵循这个原则,thi...

React:引入class关键字后this的绑定问题

解决方案一:采用箭头函数 箭头函数将this和函数定义时的上下文绑定,能达到期望的效果。解决方案二:在回调响应的地方手动绑定 解决方案三:构造函数中手动绑定 React.createClass 估计采用的就是这种方案,构造函数将所有的fu...

this的绑定与丢失问题

1、new绑定:new方式是优先级最高的一种调用方式,构造函数只是一些使用new操作符时被调用的函数。只要使用new方式调用一个构造函数,this一定指向new调用函数新创建的对象。使用new来调用函数的时候会自动执行下面的操作:①、...

React方向:元素添加事件以及react组件

方法一:外部定义函数 方法二:使用箭头函数添加 react中的组件在概念上来说是类似于JavaScript函数(即"props"),并返回用于页面展示的内容React元素 所谓的无状态组件,是指的其定义的值,无法被react监听到。此处ele只是一...

react中元素绑定enter事件

在项目中经常会遇到查询的功能,一般会要求有两种实现方式:一是在input输入完成后直接点击搜索按钮触发接口,二是input输入完成后直接按enter键触发接口,第一种方式很简单,这里主要写写第二种方式的处理 在js里绑定enter事件...

react 的路由组件是如何传参的?

React Router 提供了三种方式来传递参数:params、query 和 state。其中,params 传参是通过在路由上配置参数,然后在组件中使用 this.props.match.params 获取参数的方式。query 传参是通过在 Link 组件中设置 query 属性,...

react给table中button绑定点击事件

在使用react在table中给button添加onclick事件时发现 onClick事件会自动执行一次,然后再点击的时候失效了 后来发现,把()去掉,可以正常执行。但想在()里面传当前点击行的 padID 于是 在button添加padID 用 e.target ...

react js 怎样绑定键盘敲击回车事件

document.addEventListener("keydown",this.handleEnterKey);} componentWillUmount(){ document.removeEventListener("keydown",this.handleEenterKey);} handleEnterKey = (e) =&gt; { if(e.keyCode === 13){ //do ...

在React中如何实现组件内部通信

2. 组件内部数据传递React 组件内部通信主要分为两部分:数据展示与事件处理。2.1 数据展示组件内部数据的展示和更新都是通过 state 来实现的,如果要使用 state 必须使用 ES6 的 class 定义组件。数据更新在双向数据绑定部分...

本文如未解决您的问题请添加抖音号:51dongshi(抖音搜索懂视),直接咨询即可。

Top