react里的this指向问题

Question

两个组件：

父组件：

constructor(props){
    super(props);
    this.state = {
        currentPage:0
    }
}
setPage(num){
    console.log(this);  //得出的是子组件
    this.setState({    //提示'setState'不是一个方法
        currentPage:num
    })
  }

render(){
    return(
        <div>
             <App 
                 setPage = {this.setPage}
             /> 
        </div>
    )
}

子组件：

clickFuc(index) {

        this.setState({
            currentIndex: index
        },()=>{
               this.props.setPage(index);
        })
    }
    
    
    render(){
        return (
           <div onClick={this.clickFuc.bind(this,index)}></div>
        )
    }

问题：这里的this还是子组件，没有指向父组件，该如何达到通过子组件来改变父组件的state值？

Answer 1

用箭头函数定义方法

setPage= () => {...}

或者在constructor绑定

constructor(props) {
    super(props);
    this.state = {
        ...
    };
    this.setPage = this.setPage.bind(this);
}

Answer 2

setPage = {()=>this.setPage()}

Answer 3

setPage = {this.setPage.bind(this)}
or
setPage = {()=>{this.setPage()}}

Answer 4

通过 bind 绑定 this

constructor(props){
    super(props);
    this.state = {
        currentPage:0
    };
    this.setPage = this.setPage.bind(this);
}

Answer 5

把<App setPage={this.setPage} /> 改成<App setPage={this.setPage.bind(this)} /> 试试。