关于react绑定事件中的this
来源:互联网 发布:unity3d rpg 编辑:程序博客网 时间:2024/05/29 13:29
关于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>方法函数如下:
register(name,event){ console.log(name); event.preventdefault(); console.log(this.state.data); }这样来写,可以获取到传参,也可以拿到this,也可以拿到事件的默认参数。我们在申明时间的时候,可以不绑定event,但是一定要绑定this,而且还是第一个参数就要绑定this,传参紧跟其后面。
阅读全文
0 0
- 关于react绑定事件中的this
- React事件处理函数中绑定this的bind()函数
- 001_关于循环绑定事件函数中的对象索引值与this
- React:ES6:ES7中的6种this绑定方法
- react绑定事件
- react-事件绑定
- React Native 的绑定 this
- React-Native的绑定this
- React Native 的绑定 this
- React Native 的绑定 this
- react 中的this
- React中的this
- react 实现双向绑定以及事件绑定
- React绑定this的三种方式
- react之this绑定及性能优化
- react函数绑定this的方式。
- react-native react 中的bind(this)
- React Native中的事件
- 欢迎使用CSDN-markdown编辑器
- Decompiled .class file bytecode version:49.0(java5.0) load or open source file.
- 汇编基础案例
- 如何在 Django 连接 MYSQL 数据库
- Android SharedPreference 源码分析(一)
- 关于react绑定事件中的this
- pwnable.kr 之simplelogin
- 身份证扫描的功能sdk
- (转)深入浅出Mybatis---强大的动态SQL
- Linux下安装、配置、启动Apache
- spring-boot入门(三)前后端分离使用HTML视图
- 三公微信棋牌源码搭建
- 使用myeclipse搭建带maven的ava web项目(Spring+SpringMVC+Mybatis)
- 笔记整理之——转发和重定向