react事件处理函数中绑定this的bind()函数

Posted 想旅游咯

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了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

 

如果 觉得文章不错,可以请博主喝一杯奶茶哦!!!

技术分享图片技术分享图片

 






以上是关于react事件处理函数中绑定this的bind()函数的主要内容,如果未能解决你的问题,请参考以下文章

React事件处理

React事件处理

react表单和绑定事件及state和props-04

react篇 绑定this 再也不担心this undefined辣

React4.事件处理与类组件状态

规避 React 组件中的 bind(this)