关于react绑定事件中的this
2017-12-09 17:56
281 查看
关于react事件中的this指针问题:
如果我们在react时间中,如果不绑定this,那么方法执行的时候是找不到this的:
比如下面的情况:
import React from 'react'
import Logo from '../../component/logo/logo'
import {List,InputItem,WingBlank,WhiteSpace,Button} from 'antd-mobile'
class Login extends React.Component{
constructor(props){
super(props)
}
register(){
this.props.history.push('/register')
}
render (){
return (
<div>
<Logo/>
<h2>登录页</h2>
<WingBlank>
<Button type="primary">登录</Button>
<WhiteSpace/>
<Button onClick={this.register} type="primary">注册</Button>
</WingBlank>
</div>
)
}
}
export default Login;这里面的执行会直接报错,因为找不到this。
解决办法:
<Button onClick={this.register.bind(this)} type="primary">注册</Button>这个时候,在执行上面的函数,我们就可以找得到this了。
关于传参和原生event参数的问题,可以这么写
<Button onClick={this.register.bind(this,name)} type="primary">注册</Button>方法函数如下:
如果我们在react时间中,如果不绑定this,那么方法执行的时候是找不到this的:
比如下面的情况:
import React from 'react'
import Logo from '../../component/logo/logo'
import {List,InputItem,WingBlank,WhiteSpace,Button} from 'antd-mobile'
class Login extends React.Component{
constructor(props){
super(props)
}
register(){
this.props.history.push('/register')
}
render (){
return (
<div>
<Logo/>
<h2>登录页</h2>
<WingBlank>
<Button type="primary">登录</Button>
<WhiteSpace/>
<Button onClick={this.register} type="primary">注册</Button>
</WingBlank>
</div>
)
}
}
export default Login;这里面的执行会直接报错,因为找不到this。
解决办法:
<Button onClick={this.register.bind(this)} type="primary">注册</Button>这个时候,在执行上面的函数,我们就可以找得到this了。
关于传参和原生event参数的问题,可以这么写
<Button onClick={this.register.bind(this,name)} type="primary">注册</Button>方法函数如下:
register(name,event){ console.log(name); event.preventdefault(); console.log(this.state.data); }这样来写,可以获取到传参,也可以拿到this,也可以拿到事件的默认参数。我们在申明时间的时候,可以不绑定event,但是一定要绑定this,而且还是第一个参数就要绑定this,传参紧跟其后面。
相关文章推荐
- 详解react关于事件绑定this的四种方式
- 001_关于循环绑定事件函数中的对象索引值与this
- 每日质量NPM包事件绑定_bindme(详解React的this)
- 关于原生事件绑定中attachEvent与addEventlistener中兼容性以及attachEvent函数中this指代window问题
- JavaScript call apply使用——JavaScript对象的方法绑定到DOM事件后this指向问题
- 关于jQuery绑定事件on和bind的区别详解 -- sanai
- 关于form表单input text 未绑定回车事件跳转问题
- 关于动态生成dom绑定事件失效的原因及解决方法
- 关于动态生成dom绑定事件的问题
- React学习之事件绑定处理机制(五)
- 关于jQuery新的事件绑定机制on()的使用技巧
- 关于jQuery动态加载元素之后绑定事件无法触发的问题
- 关于箭头函数的 this 绑定
- JavaScript关于事件绑定
- Angular开发(三)-关于属性绑定与事件绑定
- [ javascript ] 关于addEventListener绑定事件的一些细节.
- 有关于DOM事件绑定
- Javascript事件绑定this
- javascript 切换上下文,事件绑定中改变this指向
- 关于jQuery绑定事件会叠加的解决和心得总结