• 最近在学习react native 但是一直不明,为啥定义一个方法,在onPress中为啥要写成this.back.bind(this),我back就是一个方法为啥还要再bind(this). 其实就是一个作用域,绑定这个作用域中的方法。  那么其实我们有...

    最近在学习react native 但是一直不明,为啥定义一个方法,在onPress中为啥要写成this.back.bind(this),我back就是一个方法为啥还要再bind(this). 其实就是一个作用域,绑定这个作用域中的方法。 
    那么其实我们有两种写法去定义onPress的响应方法。

    1.不加bind(this)

    onPress={this.back}
    ....
      back = () => {
            const {navigator} = this.props;
            navigator.pop();
        }
    • 1
    • 2
    • 3
    • 4
    • 5
    • 6

    这种写法不用去bind了,

    ()=>{} 这种形式的代码,语法规定就是(function(){}).bind(this),即自动添加了bind this

    2.需要加bind

    onPress={this.back.bind(this)}
    
    ....
    
      back() {
            const {navigator} = this.props;
            navigator.pop();
        }
    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8

    这种要bind的

    展开全文
  • 这个问题其实是一个 JavaScript 中的问题,因此我们学习react native的同胞们学习一下JavaScript很有必要的。JavaScript中jQury的bind方法为选定元素添加事件处理程序,规定事件发生时运行的函数。语法为:$...
    这个问题其实是一个 JavaScript 中的问题,因此我们学习react native的同胞们学习一下JavaScript很有必要的。JavaScript中jQury的bind方法为选定元素添加事件处理程序,规定事件发生时运行的函数。

    语法为:

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

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

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


    实现上面效果时,需要用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>


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

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



    箭头函数也能完成事件绑定
    另外,上面的bind绑定操作和show函数可以直接通过箭头函数完成。箭头函数可以直接完成bind绑定(它会绑定当前scope的this引用)。可以参照ES6写法–React Native中文社区中ES5和ES6的比较–方法作为回调部分。
    也就是将上面实现代码写成如下形式:

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

    所以,bind将事件操作和函数处理建立联系,bind和箭头函数都能完成这一绑定。
    展开全文
  • JavaScript中jQury的bind方法为选定元素添加事件处理程序,规定事件发生时运行的函数。    语法为: $(selector).bind(event,data,function) 1 2 也就是相对应的event事件发生时就会执行function函数。data是...

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

    $(selector).bind(event,data,function)
    
    • 1
    • 2

    也就是相对应的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>
    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8

    而其中的show函数:

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

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

         <TouchableOpacity
              style={styles.style_view_commit}
              onPress={this.show("XX")}
            >
              <Text style={{ color: '#fff' }}>
                登录
              </Text>
            </TouchableOpacity>
    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8

    此时的效果: 

    xiaoguo 

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

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

     

    箭头函数也能完成事件绑定

    另外,上面的bind绑定操作和show函数可以直接通过箭头函数完成。箭头函数可以直接完成bind绑定(它会绑定当前scope的this引用)。可以参照ES6写法–React Native中文社区中ES5和ES6的比较–方法作为回调部分。 
    也就是将上面实现代码写成如下形式:

          <TouchableOpacity
              style={styles.style_view_commit}
              onPress={()=>this.show("XX")}
            >
              <Text style={{ color: '#fff' }}>
                登录
              </Text>
            </TouchableOpacity>
    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8

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

    展开全文
  • react native 代参bind this 的两种方式: http://blog.csdn.net/cockhorseman_z/article/details/51594127请教react native的写法中,用bind和用箭头函数哪个好?: https://segmentfault.com/q/1010000006841365

    react native 代参bind this 的两种方式:
    http://blog.csdn.net/cockhorseman_z/article/details/51594127

    请教react native的写法中,用bind和用箭头函数哪个好?:
    https://segmentfault.com/q/1010000006841365

    展开全文
  • bind(this)

    bind的概念

    bind是javascript函数中常用的一个功能。

    bind()方法创建一个新的函数, 当被调用时,将其this关键字设置为提供的值,在调用新函数时,在任何提供之前提供一个给定的参数序列。

    以下是bind最简单的用法:

    this.x = 9; 
    var module = {
      x: 81,
      getX: function() { return this.x; }
    };
    
    module.getX(); // 返回 81
    
    var retrieveX = module.getX;
    retrieveX(); // 返回 9, 在这种情况下,"this"指向全局作用域
    
    // 创建一个新函数,将"this"绑定到module对象
    var boundGetX = retrieveX.bind(module);
    boundGetX(); // 返回 81

    bind函数到底做了什么操作,能使this绑定到我们需要绑定的对象当中?其实也就类似以下代码:

       Function.prototype.bind = function (scope) {
         var fn = this;
         return function () {
           fn.apply(scope);
         }
       } 

    返回新建了一个函数,并把需要绑定的作用域传递到这个新函数上。

    React中的bind

    在React或React-native的点击事件中,会经常用到bind(this)。
    比如说一个简单的React-native点击组件:

    export default class AwesomeProject extends Component {
      constructor(props){
        super(props);
        this.state = {
        }
      }
    
      handleClick () {
        console.log('this is:',this);
      }
    
      render() {
        return (
          <View style={styles.container}>
            <Text style={styles.welcome} onPress={this.handleClick.bind(this)}>
              Welcome to React Native!
            </Text>
          </View>
        );
      }
    
    }

    在上面的代码中,我们对点击事件函数进行了bind(this),如果不bind(this)的this会怎么样?
    这里写图片描述
    这里写图片描述
    上图是bind了this的,而下图是没有bind(this)的。如果没有bind(this),在执行这个函数时,取到的this是这个text组件。

    React中的bind方法的选择

    因为箭头函数与bind(this)的作用是一样的,所以我们可以有4种选择

      //写法1
      <View onPress={this.handleClick.bind(this)}></View>
    
      //写法2
      constructor(props){
        super(props);
        this.handleClick = this.handleClick.bind(this);
      }
    
      //写法3
      <View onPress={()=>this.handleClick()}>
    
      //写法4
      handleClick = () => {
    
      }

    因为bind方法会重新生成一个新函数,所以写法2和写法3每次render都会生成新的函数,所以建议使用1或4

    展开全文
  • React Native 的绑定 this

    2017-04-01 10:13:04
    React Native开发中,如果使用ES6语法的话,最好绑定this.但是使用ES5语法的话不需要绑定this.因为ES5会autobinding. this所指的就是直至包含this指针的上层对象. 绑定this方法1: /** * Sample React Native ...
  • 现来个图:没图说个xx 先来分析怎么做 一个导航栏 一个列表 一个摘要列表 大体可以分为上中下三个模块,那么我们从上到下一次封装。我们来搞出些事情创建.js文件,一个组件一个.js文件我们通过命令行工具,进入工程...
  • 源码如下:'use strict'; import React, { AppRegistry, Component, StyleSheet, Text, View, ScrollView, PixelRatio, NavigatorIOS, ...} from 'react-native';class HelloWorld extends Comp
  • 官网 https://reactnative.cn/ 1.先看效果 这是app store上随机找的一个APP 引导页面大部分APP都有的 。。。 尽管这东西没什么用不说,还占APP控件(总有些2B的设计喜好搞那些鲜艳颜色的高清图)所以大一点的厂或者...
  • React Native提供了和web标准一致的Fetch API,用于满足开发者访问网络的需求。 发起网络请求 要从任意地址获取内容的话,只需简单地将网址作为参数传递给fetch方法即可: fetch('...
  • TextInput组件介绍输入框组件的主要属性如下: autoCapitalize : 枚举类型,可选值有none,sentences,words,characters.当用户输入时,用于提示。 placeholder:占位符,在输入前显示的文本内容。...
  • 为什么把这个知识点放在这里呢,因为我们在查找资料...JavaScript中jQury的bind方法为选定元素添加事件处理程序,规定事件发生时运行的函数,所以后期需要我们学习一下JavaScript 基本语法,不要着急哦。 语法为:...
  • eslint --init copy pic2 to eslintrc.js { "csharp.format.enable": false, "workbench.iconTheme": "eq-material-theme-icons", "...editor.fontSize&quo
  • React Native中,动画API提供了一些现成的组件:Animated.View,Animated.Text和Animated.Image默认支持动画。动画API会调用iOS或者Android的本地代码来完成这些组件的位移、大小等动画。 在React Native中,...
  • React Native 报错 undefined is not a object (没有定义该对象),通常是报错的是在this.props.或者this.setState的地方报错。 this只的是当前对象 bind 为指定的事件添加相对应的函数,就是将处理函数和指定...
  • No .bind() or Arrow Function in JSX Propsissue fromhttps://github.com/MichaelCereda/react-native-form-generator/issues/45warning codeexport class InputField extends React.Component{ handleValidation...
  • React Native 学习笔记

    2016-11-01 16:59:08
    ReactNative学习笔记,基于一个经典教程,附适配0.36版本源代码
  • ReactNative使用websocket实现实时聊天与web端使用websocket的写法一样,直接newWebSocket就可以。我在github上找到了两个有关RN的websocket组件包(react-native-websocket和react-native-reconnecting-websocket)...
  • 对于react native 绑定this,我将其归类为以下四种方式: bind 箭头函数 ::运算符 使用箭头函数定义函数 首先明确观点,我向大家推荐第四种方式: 1.bind class TestBind extends React.Component { ...
1 2 3 4 5 ... 20
收藏数 4,808
精华内容 1,923