React 事件机制

一个组件的所有事件会使用统一的事件监听器,绑定到组件的最外层,那么如何使用?

  1. bind方法,绑定并且可以传递参数

     <TouchableOpacity
    onPress={this.fun.bind(this)}
    onPress={this.fun.bind(this,"text")}
    >
    </TouchableOpacity> fun(){ }
  2. 如果不用传参数?
双冒号语法
{::this.fun}
  1. 在构造器内bind,好处是只绑定一次
    constructor(props){
super(props);
this.state={}
this.fun=this.fun.bind(this)
}
<Text onPress={this.fun}></Text>
  1. 箭头函数 会自动绑定this
1. <Text onPress={this.fun}></Text>
const fun=(e)=>{
console.log(e)
}
2. <Text onPress={()=>this.fun()}></Text>
fun(){ }

总结react native 事件机制的更多相关文章

  1. React Native通信机制详解

    React Native是facebook刚开源的框架,可以用javascript直接开发原生APP,先不说这个框架后续是否能得到大众认可,单从源码来说,这个框架源码里有非常多的设计思想和实现方式值得 ...

  2. [技术博客]react native事件监听、与原生通信——实现对通知消息的响应

    在react native中会涉及到很多页面之间的参数传递问题.静态的参数传递通常利用组件的Props属性,在初始化组件时即可从父组件中将参数传递到子组件中.对于非父子关系的组件来说,无法直接传递参数 ...

  3. [React Native]Promise机制

    React Native中经常会看到Promise机制. Promise机制代表着在JavaScript程序中下一个伟大的范式.可以把一些复杂的代码轻松撸成一个串,和Android中的rxjava非常 ...

  4. react native 刷新机制----通知

    在项目中,不知道大家有没有遇到这样的一个问题,比如说有两个页面A,B.A页面中有某个按钮点击后可以跳转到B页面,现在有一个需求就是,我在B页面中做了某些操作,然后点击回退按钮,回到A页面,A页面中的数 ...

  5. 深入理解React:事件机制原理

    目录 序言 DOM事件流 事件捕获阶段.处于目标阶段.事件冒泡阶段 addEventListener 方法 React 事件概述 事件注册 document 上注册 回调函数存储 事件分发 小结 参考 ...

  6. React Native初探

    前言 很久之前就想研究React Native了,但是一直没有落地的机会,我一直认为一个技术要有落地的场景才有研究的意义,刚好最近迎来了新的APP,在可控的范围内,我们可以在上面做任何想做的事情. P ...

  7. [转] 「指尖上的魔法」 - 谈谈 React Native 中的手势

    http://gold.xitu.io/entry/55fa202960b28497519db23f React-Native是一款由Facebook开发并开源的框架,主要卖点是使用JavaScrip ...

  8. React Native 从入门到原理

    React Native 是最近非常火的一个话题,介绍如何利用 React Native 进行开发的文章和书籍多如牛毛,但面向入门水平并介绍它工作原理的文章却寥寥无几. 本文分为两个部分:上半部分用通 ...

  9. 关于React Native 火热的话题,从入门到原理

    本文授权转载,作者:bestswifter(简书) React Native 是最近非常火的一个话题,介绍如何利用 React Native 进行开发的文章和书籍多如牛毛,但面向入门水平并介绍它工作原 ...

随机推荐

  1. 了解Redis过期策略及实现原理

    我们在使用redis时,一般会设置一个过期时间,当然也有不设置过期时间的,也就是永久不过期. 当我们设置了过期时间,redis是如何判断是否过期,以及根据什么策略来进行删除的. redis设置过期时间 ...

  2. nfs共享文件搭建

    Linux NFS服务器的安装与配置详解 一.NFS服务简介  NFS是Network  File System(网络文件系统).主要功能是通过网络让不同的服务器之间可以共享文件或者目录.NFS客户端 ...

  3. 常用的node.js模块

    一.url模块1.url.parse:将一个url转换成一个对象 1)参数1:url 2)参数2:布尔值 3)如果参数2是一个true的情况下会将query解析成一个对象2.url.format:将一 ...

  4. kali linux中文输入法

    kali linux中文输入法 已经使用kali linux有一段时间来,越用越喜欢,真的奥! 最近又有宝宝问我kali linux的中文输入法,鉴于当初在坑里蹲了很长时间,还是记录一下吧! The ...

  5. NGINX转发代理情况下,获取客户单真实IP

    编译时加上http_realip_module 模块 realip模块生效的前提是:直接连接nginx的ip是在set_real_ip_from中指定的. 原机配置: set_real_ip_from ...

  6. jquery .width和css("width", )区别

    1.$.fn.width会根据是否是borderBox来计算新的宽度,如果是borderBox,会额外加上padding和border的宽度,计算时只是按照px来,用rem做单位会出错: 2.$.fn ...

  7. JSch : channel never closed or EOF 通道未关闭

    最近,我们的项目在开发远程节点管理的时候,使用了jsch库.在测试的时候发现有个节点在cmd执行完成之后,channel.isClosed()一直都是false,导致请求无法返回,但是其它有些节点就没 ...

  8. nvgre

    GRE RFC2784 工作原理 Structure of a GRE Encapsulated Packet A GRE encapsulated packet has the form: ---- ...

  9. ORA-16038 ORA-19809 ORA-00312

    问题表现: 连接数据库启动报错,ORA-03113, 查看详细的alert日志发现更多报错,如下 ORA-19809: 超出了恢复文件数的限制ORA-19804: 无法回收 209715200 字节磁 ...

  10. 20145221高其_Web基础

    20145221高其_Web基础 目录 实践目标 Apache 前端编程 后端编程 PHP MYSQL & 后端 简单SQL注入与XSS 发帖和会话管理 总结 实践目标 (1)Web前端HTM ...