鍍金池/ 問(wèn)答/HTML/ react里的this指向問(wèn)題

react里的this指向問(wèn)題

兩個(gè)組件：

父組件：

constructor(props){
    super(props);
    this.state = {
        currentPage:0
    }
}
setPage(num){
    console.log(this);  //得出的是子組件
    this.setState({    //提示'setState'不是一個(gè)方法
        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>
        )
    }

問(wèn)題：這里的this還是子組件，沒(méi)有指向父組件，該如何達(dá)到通過(guò)子組件來(lái)改變父組件的state值？

回答
編輯回答
朽鹿

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

2017年4月18日 07:35
編輯回答
拼未來(lái)

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

2017年5月24日 05:42
編輯回答
選擇

用箭頭函數(shù)定義方法

setPage= () => {...}

或者在constructor綁定

constructor(props) {
    super(props);
    this.state = {
        ...
    };
    this.setPage = this.setPage.bind(this);
}
2017年2月11日 20:51
編輯回答
不討喜

通過(guò) bind 綁定 this

constructor(props){
    super(props);
    this.state = {
        currentPage:0
    };
    this.setPage = this.setPage.bind(this);
}
2018年3月7日 18:22
編輯回答
負(fù)我心
setPage = {()=>this.setPage()}
2018年7月7日 06:59