JS bind and state

上代码

import React, {Component} from "react";
import {Text, TouchableOpacity, View} from "react-native";

class Blink extends Component {
    constructor(props) {
        super(props);
        this.state = {
            showText: true,
            numberText: 0
        };

        setInterval(() => {
            this.setState(() => {
                return {
                    showText: !this.state.showText,
                    numberText: this.state.numberText + 1
                };
            });
        }, 1000);
    }

    render() {
        let display = this.state.showText ? this.props.text : " " + this.state.numberText;
        return ({display});
    }
}

export default class BlinkText extends Component {
    constructor(props) {
        super(props);
        this.state = {
            count: 0,
        };
        console.log("constructor   " + this.state.count);
        
        this.countAdd = this.countAdd.bind(this);//绑定之后，countAdd中的this就指向了BlinkText的对象，就可以获取state了，
                                                // 如果不绑定，countAdd中的this指向的是TouchableOpacity
                                                 //如果直接使用箭头函数，可以省去绑定，() => this.countAdd()
    }

    countAdd() {
        console.log("add ", this);
        this.setState(() => {
            return {
                count: this.state.count + 1 //注意：number.count++ 会一直返回0,使用++this.state.count也可以，
                                            // 虽然是一元计算符，但是也做了三步操作
            };
        });
    }

    render() {
        return (
            
                
                
                {this.state.count}
                
                    {/* this.countAdd()}>*/}
                    add count
                
            
        );
    }
}

当没有bind时，add处打印的结果为

没有bind时.png

bind之后.png

所以会出现直接调用函数，但是取不到state的情况，解决方法在注释处已经说明。