ES6下子组件调用父组件的方法(推荐)


Posted in Javascript onFebruary 23, 2018

出于某些目的,最近又开始研究起了RN,看着教程一步步的学习,在最近却是碰到了一个问题,那就是父子组件的方法调用的问题。

这个问题我百度了很久,JS的ES6语法下,用class创建组件,子组件调用父组件方法模拟器不断报错。

因为我看的视频是基于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 style={styles.container}>
          <Son ref="Son1" timex={this.state.timex} timesReset={this.timesReset}/>
          //或者<Son ref="Son1" timex={this.state.timex} timesReset={this.timesReset.bind(this)}/>
        </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 style={styles.container}>
      <Text style={styles.instructions}>
      儿子:虽然你揍了我 {this.state.times} 次,但是我 永 不 屈 服!!
      </Text>
      <TouchableHighlight style={styles.btn} underlayColor={'pink'} onPress={this.timesReset.bind(this)}>
        <Text style={{textAlign:'center'}}>爹,再给你儿子一次机会!!</Text>
      </TouchableHighlight>
    </View>
    );
  }
}

以上这篇ES6下子组件调用父组件的方法(推荐)就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
用js实现手把手教你月入万刀(转贴)
Nov 07 Javascript
Jquery绑定事件(bind和live的区别介绍)
Aug 23 Javascript
JavaScript设计模式之观察者模式(发布者-订阅者模式)
Sep 24 Javascript
JavaScript中字符串分割函数split用法实例
Apr 07 Javascript
JS获取图片高度宽度的方法分享
Apr 17 Javascript
图片加载完成再执行事件的实例
Nov 16 Javascript
详解weex默认webpack.config.js改造
Jan 08 Javascript
layui实现动态和静态分页
Apr 28 Javascript
小程序视频列表中视频的播放与停止的示例代码
Jul 20 Javascript
vue解决一个方法同时发送多个请求的问题
Sep 25 Javascript
使用react context 实现vue插槽slot功能
Jul 18 Javascript
Vite和Vue CLI的优劣
Jan 30 Vue.js
angular动态表单制作
Feb 23 #Javascript
angularjs中$http异步上传Excel文件方法
Feb 23 #Javascript
浅谈vuejs实现数据驱动视图原理
Feb 23 #Javascript
Vue父组件调用子组件事件方法
Feb 23 #Javascript
vue实现密码显示隐藏切换功能
Feb 23 #Javascript
对vue.js中this.$emit的深入理解
Feb 23 #Javascript
基于vue.js中事件修饰符.self的用法(详解)
Feb 23 #Javascript
You might like
Ajax+PHP边学边练 之五 图片处理
2009/12/03 PHP
判断PHP数组是否为空的代码
2011/09/08 PHP
centos+php+coreseek+sphinx+mysql之一coreseek安装篇
2016/10/25 PHP
Thinkphp5.0框架视图view的循环标签用法示例
2019/10/12 PHP
jQuery的.live()和.die() 使用介绍
2011/09/10 Javascript
cookie在javascript中的使用技巧以及隐私在服务器端的设置
2012/12/03 Javascript
JavaScript中Math对象方法使用概述
2014/01/02 Javascript
浅谈jQuery异步对象(XMLHttpRequest)
2014/11/17 Javascript
jQuery控制网页打印指定区域的方法
2015/04/07 Javascript
Bootstrap树形组件jqTree的简单封装
2016/01/25 Javascript
jQuery实现横向带缓冲的水平运动效果(附demo源码下载)
2016/01/29 Javascript
详解Node.js模块间共享数据库连接的方法
2016/05/24 Javascript
js图片上传前预览功能(兼容所有浏览器)
2016/08/24 Javascript
JavaScript面试题大全(推荐)
2016/09/22 Javascript
JavaScript实现使用Canvas绘制图形的基本教程
2016/10/27 Javascript
微信小程序 loading 详解及实例代码
2016/11/09 Javascript
jQuery的ajax中使用FormData实现页面无刷新上传功能
2017/01/16 Javascript
react.js 父子组件数据绑定实时通讯的示例代码
2017/09/25 Javascript
JS实现为动态添加的元素增加事件功能示例【基于事件委托】
2018/03/21 Javascript
JavaScript读写二进制数据的方法详解
2018/09/09 Javascript
JS集合set类的实现与使用方法示例
2019/02/01 Javascript
vue 实现input表单元素的disabled示例
2019/10/28 Javascript
js实现星星打分效果
2020/07/05 Javascript
[01:50]2014DOTA2西雅图邀请赛 专访欢乐周宝龙
2014/07/08 DOTA
Python实现遍历数据库并获取key的值
2015/05/17 Python
Python 获得命令行参数的方法(推荐)
2018/01/24 Python
python通过TimedRotatingFileHandler按时间切割日志
2019/07/17 Python
如何基于python实现年会抽奖工具
2020/10/20 Python
CSS3 实现穿梭星空动画
2020/11/13 HTML / CSS
外贸业务员求职自荐信分享
2013/09/21 职场文书
年终自我鉴定
2013/10/09 职场文书
办公室文员工作自我评价
2013/12/01 职场文书
冰淇淋开店创业计划书
2014/02/01 职场文书
保安部任务及岗位职责
2014/02/25 职场文书
Python访问Redis的详细操作
2021/06/26 Python
Python绘制散点图之可视化神器pyecharts
2022/07/07 Python