zoukankan      html  css  js  c++  java
  • react事件处理函数中绑定this的bind()函数

    问题引入

    import React, { Component } from 'react';
    import {
      Text,
      View
    } from 'react-native';
    
    export default class App extends Component<Props> {
      constructor(props){
        super(props)
        this.state={
          times:0
        }
        this.timePlus=this.timePlus.bind(this);
      }
      timePlus(){
        let time=this.state.times
        time++
        this.setState({
          times:time
        })
      }
      render() {
        return (
          <View>
            <Text onPress={this.timePlus}>有本事点我呀</Text>
    //<Text onPress={this.timePlus.bind(this)}>有本事点我呀</Text>
    <Text>你点了我{this.state.times}次</Text> </View>
    );
    }
    }

    每次在处理事件函数时都需要绑定this的bind函数;

    bind() 最简单的用法是创建一个函数,使这个函数不论怎么调用都有同样的 this 值。

    bind()方法会创建一个新函数,当这个新函数被调用时,它的this值是传递给bind()的第一个参数, 它的参数是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

    从实例可以看出:React构造方法中的bind会将handleClick函数与这个组件Component进行绑定以确保在这个处理函数中使用this时可以时刻指向这一组件。

    源码地址:https://github.com/zuobaiquan/react-native/tree/master/myExercise/firstProject

  • 相关阅读:
    jquery toggle(listenerOdd, listenerEven)
    struts quick start
    hdu 1518 Square (dfs)
    hdu 2544 最短路 (最短路径)
    hdu 1754 I Hate It (线段树)
    hdu 1856 More is better (并查集)
    hdu 1358 Period (KMP)
    hdu 2616 Kill the monster (DFS)
    hdu 2579 Dating with girls(2) (bfs)
    zoj 2110 Tempter of the Bone (dfs)
  • 原文地址:https://www.cnblogs.com/zuobaiquan01/p/8728949.html
Copyright © 2011-2022 走看看