登录  /  注册
首页 > web前端 > js教程 > 正文

子组件调用父组件的方法实例

小云云
发布: 2018-02-24 09:04:08
原创
1716人浏览过

出于某些目的,最近又开始研究起了rn,看着教程一步步的学习,在最近却是碰到了一个问题,那就是父子组件的方法调用的问题。这个问题我百度了很久,js的es6语法下,用class创建组件,子组件调用父组件方法模拟器不断报错。本文主要为大家分享一篇es6下子组件调用父组件的方法。希望能帮助到大家。

因为我看的视频是基于es5的语法来实现的代码,所以语法有些不同。

es5的语法下,方法的this都是RN已经帮我们处理好了的,所以按照视频中的示例是可以达成效果的,但是es6貌似是要自己写的。。

具体的写法就是在constructor中添加 this.xxxxx = this.xxxxx.bind(this);

或者在子组件绑定的时候就写this.xxxxx.bind(this) .

这里就不多讲了,下面上代码,以供需要的人参考。

export default class TestPrj extends Component {
    constructor(props){
      super(props);
      this.timesReset = this.timesReset.bind(this);
      this.state = {timex:2};
    }
    timesReset(){
      this.setState({
        timex:0
      });
    }
    render() {
      return(
        <view>
          <son></son>
          //或者<son></son>
        </view>
      );
    }
  }
 class Son extends Component{
  
  constructor(props){
    super(props);
    this.state = {times:this.props.timex};
  }
  componentWillReceiveProps(props){
    console.log(this.props);
    this.setState({
      times:props.timex
    })
  }
  timesReset(){
    this.props.timesReset();
  }
  render(){
    return(
    <view>
      <text>
      儿子:虽然你揍了我 {this.state.times} 次,但是我 永 不 屈 服!!
      </text>
      <touchablehighlight>
        <text>爹,再给你儿子一次机会!!</text>
      </touchablehighlight>
    </view>
    );
  }
}
登录后复制

相关推荐:

Vuejs2.0子组件调用父组件的方法

vue使用ref 让父组件调用子组件实例

Vue2.0关于父组件与子组件之间的事件发射与接收

以上就是子组件调用父组件的方法实例的详细内容,更多请关注php中文网其它相关文章!

智能AI问答
PHP中文网智能助手能迅速回答你的编程问题,提供实时的代码和解决方案,帮助你解决各种难题。不仅如此,它还能提供编程资源和学习指导,帮助你快速提升编程技能。无论你是初学者还是专业人士,AI智能助手都能成为你的可靠助手,助力你在编程领域取得更大的成就。
来源:php中文网
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
作者最新文章
最新问题
关于CSS思维导图的课件在哪? 课件
凡人来自于2024-04-16 10:10:18
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习
PHP中文网抖音号
发现有趣的

Copyright 2014-2024 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号