我的网页上有一个视频标签()和一个“播放/暂停”按钮,当用户点击它时,视频开始/停止播放.如果我不允许使用js来调用“getElementById”然后使用play()/ pause()内置方法,我怎么能做出反应呢?
任何的想法?
任何的想法?
最直接的方法是使用refs,这是一个React功能,可以让你调用从render()返回的组件实例上的方法.
您可以在文档中阅读更多内容:https://facebook.github.io/react/docs/more-about-refs.html
在这种情况下,只需在视频标签中添加一个参考字符串,如下所示:
<video ref="vidRef" src="some.mp4" type="video/mp4"></video>
这样,当您向按钮添加点击处理程序时:
<button onClick={this.playVideo.bind(this)}>PLAY</button>
playVideo方法可以通过refs访问您的视频参考:
playVideo() { this.refs.vidRef.play(); }
这是一个工作DEMO,所以你可以查看一个完整的例子.