React 跨组件传递事件

.最近在写React项目,由于刚接触不久问题也比较多,下面是实际遇到的一个问题,可能不是最优解决方案.如果有好的建议可以留言,因为刚接触不就所以理解上可能有问题.欢迎交流

1.问题描述

.就是一个获取验证码的倒计时功能,正常情况下项目中都会遇到这样的情况,之前的基本组件中的倒计时已经封装了相关功能,触发button则会开始倒计时,现在测试人员反馈说,请求发送验证码的接口还没有返回数据就开始倒计时了,这个有问题,需要改成接口响应success之后,再开始倒计时,这个就有点难搞了,由于是基础组件用到的地方比较多,很多都是包装了很多层.比如最基本中的绑定手机号中国的验证码发送,用到的组件有如下: BindMobile中嵌套了SendSms组件,可以理解为BindMobile为父组件, SendSms为子组件.

BindMobile–>SendSms

2.解决方案

.如果在父组件中可以调用子组件的相关方法岂不是就很简单的能实现该需求了,于是乎开始研究,果然,父组件中是可以调用子组件的相关方法,只不过需要做相关绑定.这样就很方便的在需要用到的地方做个绑定便可不用去大肆折腾了.

3.实行方案

• 3.1 简易版的BindMobile组件 (父组件)

    class BindMobile extends React.Component {
        render() {
            return(
                
  
                    
                    click
                
            )
        }
  
       /**
    	 * 对子组件进行一个绑定,方便在本组件中调用
    	 */ 
        onRef = (ref) => {
            this.child = ref
        }
    		
    	 /**
    	 * 点击进行倒计时功能
    	 */ 
        testTimeDown = (e) => {
            this.child.myTestSendSms()
        }
    }
  

• 3.2 简易版SendSms组件 (子组件)

    class SendSms extends React.Component {
    
    /**
     * 把组件绑定到父组件中,同时对onRef属性进行一个判断
     */
    componentDidMount(){
    	this.props.onRef && this.props.onRef(this)
    }
    
    
    /**
     * 模拟60s倒计时功能,需要在state中记录相关属性
     */
    myTestSendSms=()=>{
    console.log('SendSms->myTestSendSms->beforeSend');
    this.setState({
      num: this.props.time || 60,
      hasSend: true
    })
    this.Timer = setInterval(() => {
      if (this.state.num > 0) {
        this.setState({
          num: this.state.num - 1,
        })
      } else {
        clearInterval(this.Timer)
      }
    }, 1000)
  	}
  
    render() {
        return ('SendSms')
    }
    }
  

4.结语

.本例子只是对React组件的一个简单介绍,具体可以参考自己的组件;

本例是通过onRef通信方法,如果想要在父组件中调用子组件的事件可以按照此方法,在父组件中传递一个绑定子组件的参数,在子组件挂在完毕的时候把父组件传递过来的参数进行一个绑定即可.