React子组件给父组件传值

前言

时隔半年，我又回来了！！ 最近被公司要求前后端都做，而前端框架用的是react，本身这个框架就有一定的难度，不好入门，再加上疫情几个月没写代码。但是没办法，还是硬着头皮上了，后面会写一篇文章，记录我是如果花一个星期从对react一无所知，到能够修改bug，并且开发新功能，这篇主要记录一下子组件如何传值给父组件。

使用场景

新功能开发中有一个场景需要子组件传值给父组件，现有六个视频播放器，可以播放历史视屏（默认视频时长都是一样），需要实现用一个进度条控制下面六个视频的开始、暂停、以及进度条快进，如下图:

其中涉及到一个点，下面六个视频播放的同时，进度条还需要根跟着视频播放进度实时往前进，以及需要根据视频的总时长，给进度条赋值，还有其他地方也需要子组件给父组件传值。

实现

其实特别简单，首先在父组件写一个get函数

getChildrenMsg = (result, msg) => { //msg是子组件传给父组件的值 this.setState({ sliderValue:msg.currentTime, }) }

然后父组件调用子组件的时候（VideoComponent是子组件），组件简化过，如下 parent={this}是父组件给子组件传值，不然子组件调用不到父组件的方法

<VideoComponent parent={this} url='https://storage.googleapis.com/media-session/caminandes/t.mp4' > </VideoComponent>

然后在子组件中调用这个函数

that.setState({ toParentMsg:{totalTime:this.duration}, }) that.props.parent.getChildrenMsg(that, that.state.toParentMsg)

that就是this。 toParentMsg是子组件中自己定义在state中的，用来存储要传给父组件的值

到这里就完事了。是不是超级简单。。