【React Native】JavaScript 中 bind 方法

2023-05-16

这个问题其实是一个 JavaScript 中的问题。JavaScript中jQury的bind方法为选定元素添加事件处理程序,规定事件发生时运行的函数。
 
语法为:

$(selector).bind(event,data,function)

也就是相对应的event事件发生时就会执行function函数。data是传递数据的可选参数。event和function必须指定明确。


 在React Native中bind方法的作用也是这样,为指定的事件添加相应的处理函数。就是将处理函数和指定的操作绑定在一起。操作触发时函数执行。
 

 为了更明确的体现这种事件绑定关系,做下面实际例子:

在点击登录按钮时,弹出alert对话框,效果如下(只是按钮点击与弹窗,输入框请忽略)。
这里写图片描述


实现上面效果时,需要用bind方法将点击操作和弹窗绑定在一起。
代码为:

	   <TouchableOpacity
          style={styles.style_view_commit}
          onPress={this.show.bind(this,"XX")}
        >
          <Text style={{ color: '#fff' }}>
            登录
          </Text>
        </TouchableOpacity>

而其中的show函数:

  show(text){
    alert('确认名字为'+text+"?");
  }

这是正确的绑定,实现了点击弹窗的效果。
而当不通过bind方法时,直接调用this.show   就是将代码改为如下(show方法不变):

	 <TouchableOpacity
          style={styles.style_view_commit}
          onPress={this.show("XX")}
        >
          <Text style={{ color: '#fff' }}>
            登录
          </Text>
        </TouchableOpacity>

此时的效果:


xiaoguo


已经不可以直接点击来弹窗了。但是发现ReLoad时会出现弹窗。
也就是说,没有bind时组件加载时会执行该函数,但是点击操作并不能使函数执行。

当onPress写成this直接调用(this.show)时,只会在reload时调用一次,而后的点击操作并不会弹出alert。因为它就是在组件渲染加载时调用一次,并没有将点击操作和函数关联,做不到根据点击来执行show函数。通过bind就能解决,也就是说这里的bind绑定,是将点击事件这个操作和show函数联系在一起,当点击按钮操作时,就会执行这个函数。所以,bind函数就是建立操作和函数执行的这种联系。


####箭头函数也能完成事件绑定 另外,上面的bind绑定操作和show函数可以直接通过箭头函数完成。箭头函数可以直接完成bind绑定(它会绑定当前scope的this引用)。可以参照ES6写法--[React Native中文社区中ES5和ES6的比较--方法作为回调部分](http://bbs.reactnative.cn/topic/15/react-react-native-%E7%9A%84es5-es6%E5%86%99%E6%B3%95%E5%AF%B9%E7%85%A7%E8%A1%A8/2)。 也就是将上面实现代码写成如下形式: ``` this.show("XX")} >

所以,bind将事件操作和函数处理建立联系,bind和箭头函数都能完成这一绑定。

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

【React Native】JavaScript 中 bind 方法 的相关文章

  • .setAttribute 与 .attribute= 背后发生了什么?

    描述 我正在使用简单javascript设置 a 的值input 我使用了多种看似相同但结果不同的方法 这是一个例子 HTML
  • C# + IE9 JS 引擎脉轮?

    我正在开发一个很酷的 C 应用程序 它在我们的模型层中大量使用 JS 我们希望使用 IE9 Chakra Javascript 引擎来提高速度 问题 我可以在 C 中使用 Chakra 并将 JS 对象作为 COM 对象进行交互吗 调用 J
  • 如何使用 ie8 检测文本输入何时发生变化

    我想检测文本输入何时发生变化 我尝试了这些 在 Firefox 中有效 但在 ie 8 中无效 taskSearch bind input function alert this val taskSearch live input func
  • Reactjs:如何自定义多个电子邮件添加和编辑的字段

    在我的项目中 有一个表单字段可以添加多封电子邮件 为此 我正在使用 react multi email 包 通过使用此包可以添加和删除电子邮件标签 但现在我也想要编辑操作 我是 ReactJS 的初学者 所以我不知道如何自定义或添加任何额外
  • Javascript:将文本附加到div中?

    我想使用 javascript 将时钟附加到 div 内部 这是我的代码
  • 清理 React Hooks 中未安装组件的内存泄漏

    我是 React 的新手 所以这可能很容易实现 但即使我做了一些研究 我自己也无法弄清楚 如果这太愚蠢了 请原谅我 Context 我在用着惯性 js https inertiajs com 使用 Laravel 后端 和 React 前端
  • 从地图中删除 google.maps.marker.AdvancedMarkerView

    我有一张地图 它根据搜索填充标记 我正在尝试使用较新的谷歌地图功能AdvancedMarkerView所以我可以用自定义 HTML 填充它 但是 随着我的搜索更新 我想刷新旧标记并在需要时放置新标记 但我一生都无法弄清楚如何做 https
  • 强制嵌入推文为 100% 宽度

    我试图通过将宽度设置为 100 来强制嵌入的推文做出响应式行为 我尝试按如下方式调整内联宽度 blockquote class twitter tweet width 100 blockquote 我还尝试对 twitter tweet 类
  • 检查字符串是否包含日文/中文字符

    我需要一种方法来检查字符串是否包含Japanese or Chinese text 目前我正在使用这个 string match u3400 u9FBF 但它不适用于以下示例 or 你能帮我吗 Thanks 通常用于中文和日文文本的 Uni
  • Puppeteer:从使用延迟加载的页面中抓取整个 html

    我正在尝试获取使用延迟加载的网页上的整个 html 我尝试过的是一直滚动到底部 然后使用 page content 我还尝试在滚动到底部后滚动回页面顶部 然后使用 page content 两种方法都会抓取表格的一些行 但不是全部 这是我的
  • 功能检测是否需要用户手势

    有没有办法检测是否调用play 是否允许在没有用户手势的情况下在视频元素上进行操作 在 Android Chrome 上会出现此警告 Failed to execute play on HTMLMediaElement API can on
  • 尝试从屏幕+麦克风录制流时收到“DOMException:由于关闭而失败”

    我正在构建一个扩展程序 它也可以记录我的屏幕和麦克风音频 概述 我有 content js 尝试访问navigator mediaDevices getUserMedia 接下来我向background js发送消息 它再次尝试访问navi
  • Apple Touch Bar 按键未触发按键事件

    当我想监听 Apple Touch Bar 按键时 是否还有其他事件可以监听 具体来说 我想监听 Escape 按键事件 我的代码适用于 常规 键盘 带有实际的转义键 但不适用于触摸栏 listenForKeypressEvent e gt
  • Rails 4 jQuery 与 javascript 冲突

    我正在尝试在 Rails 4 中制作一个应用程序 我正在挣扎 我正在尝试合并引导主题 但我遇到了供应商 JavaScript 和其余代码的问题 我认为问题可能与我的 application js 中的 jQuery 以及以 符号开头的供应商
  • jQuery - 如何选择表中所有行的最后一列?

    假设我有一个 HTML 表 如下所示 带有适当的 tr td 标签 a1 b1 c1 a2 b2 c2 a3 b3 c3 a4 b4 c4 table border 1 tr td a1 td td b1 td td c1 td tr tr
  • 使用关联数组作为 D3 的数据

    我有一个非常简单的 D3 示例 它首先将数据读入关联数组 然后将其显示在条形图中 不过 我似乎无法使用此方法显示任何内容 相反 我必须在两者之间插入一个任务 将数据读取到关联数组中 将该数据复制到一个简单数组中 然后使用该简单数组显示条形图
  • JavaScript 风格的警报系统

    我在用smoke js http ssssnakes com smoke 它允许设置经典警报 javascript 窗口的样式 您所要做的就是放置 smoke在警报之前 即 smoke confirm 我遇到的问题是确定 取消回调 它对我不
  • 仅当用户启用了 JavaScript 时才使用一些 CSS

    为了让我的网页正常降级 我有一些 CSS 只有在其相应的 JavaScript 能够运行时才应该加载它们 当且仅当浏览器启用了 JavaScript 时 加载本地 CSS 的最简单方法是什么 而且它是一个相当大的 CSS 块 所以我不想编写
  • 调整大小和滚动问题(JS/HTML)

    有两个容器 第一个是小视口 第二个是巨大的工作区 因此 用户滚动视口以在工作区中移动 我想通过 CSS 属性实现放大 缩小功能tranform 但是在这个过程中我遇到了一个难题 并没有找到精确的解决方案 问题是 当用户放大 缩小时 工作区中
  • Angular2访问父组件的@input值

    我正在尝试使用 ComponentResolver 和 ViewContainerRef 服务动态加载组件 子组件加载正常并且模板已渲染 但是我想访问子组件内父级 字段 和 值 的输入 任何帮助将非常感激 父组件 import Compon

随机推荐

  • Hive与HBase整合详解

    参考之前小节的大数据010 Hive与大数据012 HBase成功搭建Hive和HBase的环境 xff0c 并进行了相应的测试 xff0c 并且在大数据011 Sqoop中实现Hive HBase与MySQL之间的相互转换 xff1b 本
  • 大数据015——Elasticsearch基础

    1 Elasticsearch 简介 Elasticsearch是一个基于Lucene的实时的分布式搜索和分析 引擎 设计用于云计算中 xff0c 能够达到实时搜索 xff0c 稳定 xff0c 可靠 xff0c 快速 xff0c 安装使用
  • 大数据015——Elasticsearch深入

    1 Elasticsearch 核心概念 1 1 cluster 代表一个集群 xff0c 集群中有多个节点 xff0c 其中有一个为主节点 xff0c 这个主节点是可以通过选举产生的 xff0c 主从节点是对于集群内部来说的 es的一个重
  • 大数据014——Storm 集群及入门案例

    分布式实时数据处理框架 Storm 1 Storm 集群 1 1 Storm 版本变更 版本编写语言重要特性HA 高可用0 9 xjava 43 clojule改进与Kafka HDFS HBase的集成不支持 xff0c storm集群只
  • 大数据016——Kafka

    1 Kafka 简介 Kafka 是一个高吞吐量 低延迟分布式的消息队列系统 kafka 每秒可以处理几十万条消息 xff0c 它的延迟最低只有几毫秒 Kafka 也是一个高度可扩展的消息系统 xff0c 它在LinkedIn 的中央数据管
  • 大数据017——Scala基础

    Scala 是一门以 java 虚拟机 xff08 JVM xff09 为目标运行环境并将面向对象和函数式编程语言的最佳特性结合在一起的编程语言 你可以使用Scala 编写出更加精简的程序 xff0c 同时充分利用并发的威力 由于scala
  • 大数据017——Scala进阶

    Scala 基础语法 第二阶段 1 类和对象 1 1 类 1 xff09 简单类和无参方法 如下定义Scala类最简单形式 xff1a class Counter private var value 61 0 必须初始换字段 def inc
  • 大数据018——Spark(一)

    1 Spark 数据分析简介 1 1 Spark 是什么 Spark 是一个用来实现快速而通用的集群计算的平台 在速度方面 xff0c Spark 扩展了广泛使用的 MapReduce 计算模型 xff0c 而且高效地支持更多计算模式 xf
  • ROS 订阅RealsenseD435图像与opencv保存32位深度图像

    一 xff0c 通过ros订阅realsense图像 int main int argc char argv ros init argc argv 34 image listener 34 ros NodeHandle nh cv name
  • 测试左移和右移:不是左右逢源而是左右突击

    持续测试是在软件交付生命周期过程中 xff0c 以防控业务风险为目的 xff0c 将每一个业务交付阶段都辅以测试活动进行质量保障 xff0c 并尽最大可能自动化 xff0c 通过测试结果不断的反馈给制品过程的测试实践活动 随着持续测试实践的
  • 虚拟机ubuntu上安装make和cmake

    可先更新下apt xff1a sudo apt get update 首先安装make xff1a sudo apt get install ubuntu make sudo apt get install make sudo apt ge
  • ros学习笔记(十):树莓派 Ubuntu mate 16.04 开启vncserver 远程桌面+自启动+分辨率修改

    树莓派 Ubuntu mate 16 04 开启vncserver 远程桌面 43 自启动 43 分辨率修改 一 环境 1 树莓派3b 43 Ubuntu 16 04 mate 2 我是在win10 安装的 vncview 软件进行远程桌面
  • 梯度、散度、旋度的关系

    转自 百度文库https wenku baidu com view 681228626137ee06eff918c4 html 知乎上一篇不错的文章 https www zhihu com question 24591127 麦克斯韦方程组
  • 【瓣芽·Banya】React Native 构建的仿豆瓣应用

    今天介绍一个用 React Native 创建的应用 xff0c 集合了豆瓣电影 xff0c 图书等信息展示功能的 app github 地址 瓣芽 Banya 项目使用了react navigation 做路由 redux 做部分状态管理
  • CSS - position

    在 CSS 中 xff0c position 是实现元素定位的一种重要方式 使用定位的元素层叠级别比浮动会更高 xff0c 采用定位来控制元素位置会更加容易 一般我们使用定位 xff0c 是通过使用定位模式和边偏移量来确定元素位置的 定位模
  • React Native 选择器组件 / react-native-slidepicker

    react native slidepicker 一个纯 JavaScript 实现的的 React Native 组件 xff0c 用于如地址 xff0c 时间等分类数据选择的场景 github https github com lexg
  • 函数式组件 ref 的解决方案

    对于 React 中需要强制修改子组件的情况 xff0c React 提供了 Refs 这种解决办法 xff0c 使得我们可以操作底层 DOM 元素或者自定的 class 组件实例 除此之外 xff0c 文档 xff08 v17 0 1 x
  • JavaScript生成指定范围的随机数和随机数序列

    在JavaScript中我们经常使用Math random 方法生成随机数 xff0c 但是该方法生成的随机数只是0 1之间的随机数 先看如下常用方法的特征 xff1a 1 Math random 结果为0 1间的一个随机数 包括0 不包括
  • JavaScript生成指定范围随机数和随机序列

    在JavaScript中我们经常使用Math random 方法生成随机数 xff0c 但是该方法生成的随机数只是0 1之间的随机数 先看如下常用方法的特征 1 Math random 结果为0 1间的一个随机数 包括0 不包括1 2 Ma
  • 【React Native】JavaScript 中 bind 方法

    这个问题其实是一个 JavaScript 中的问题 JavaScript中jQury的bind方法为选定元素添加事件处理程序 xff0c 规定事件发生时运行的函数 语法为 xff1a selector bind event data fun