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