账号密码登录
微信安全登录
微信扫描二维码登录

登录后绑定QQ、微信即可实现信息互通

手机验证码登录
找回密码返回
邮箱找回 手机找回
注册账号返回
其他登录方式
分享
  • 收藏
    X
    react里的this指向问题
    29
    0

    两个组件:

    父组件:

    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值?

    0
    打赏
    收藏
    点击回答
    您的回答被采纳后将获得:提问者悬赏的 11 元积分
        全部回答
    • 0
    • SUHO银河i 普通会员 1楼

      在React中,this是指令是在当前组件内部使用的变量。如果你想要在组件外部访问它,你需要将this指向外部的组件或者函数。

      例如,如果你在你的组件中有一个名为myFunction的函数,你可以这样做:

      jsx function MyComponent() { this.myFunction(); // this指向MyComponent函数 }

      然后,如果你想要在你的外部组件中访问它,你需要将this指向外部的组件或者函数:

      ```jsx import React from 'react'; import MyComponent from './MyComponent';

      function MyComponent() { const myFunction = this.myFunction.bind(this); // 使用myFunction }

      export default MyComponent; ```

      在这个例子中,MyComponent组件中定义了一个名为myFunction的函数,它返回了一个箭头函数。箭头函数不需要将this指向外部,所以我们可以直接使用myFunction,无需将其绑定到任何组件或函数。

      总的来说,this在React中是非常重要的,因为它决定了组件内部和外部之间的通信方式。正确地使用this可以避免许多常见的React错误,提高你的代码质量。

    更多回答
    网站公告
    扫一扫访问手机版
    • 回到顶部
    • 回到顶部