如何在React的视频端设置组件的状态?

安德鲁·冯特

在我的组件我有一个componentDidUpdate功能,我播放视频并在该视频中,我设定的video.onended事件作为注意到这里

目前,我的代码如下所示:

  componentDidUpdate: function() {
    if(this.state.showVideo){
      this.refs.homeVideo.play();
      // Triggering event on video end
      let homeVideo = document.getElementById("homeVideo");
      homeVideo.onended = function(){
        console.log(this.state);
        this.setState({ showVideo: !this.state.showVideo });
      }
    }
  }

我现在的问题是on.end函数中未定义this.state,setState也未定义。这使我无法在react中更新组件的状态,以便我可以在视频播放器结束时关闭它。

处理此问题的适当反应方式是什么?

素食主义者

您不需要document.getElementById。

尝试将您的代码更新为此:

componentDidUpdate: function() {
    var self = this;
    if(this.state.showVideo){
      let video = this.refs.homeVideo;
      video.play();
      video.onended = function(){
        console.log(self.state);
        self.setState({ showVideo: !self.state.showVideo });
      }
    }
  }

JSfiddle示例https://jsfiddle.net/ntfjncuf/

本文收集自互联网,转载请注明来源。

如有侵权,请联系[email protected] 删除。

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章

来自分类Dev

如何在React的视频端设置组件的状态?

来自分类Dev

如何在React中轻松设置兄弟组件的状态?

来自分类Dev

如何在React中从另一个组件设置一个组件的状态

来自分类Dev

如何在React中设置对象状态

来自分类Dev

如何在父级的子级组件中设置状态?

来自分类Dev

从组件外部设置React组件状态

来自分类Dev

从组件外部设置React组件状态

来自分类Dev

如何在Typescript中编写React无状态功能组件?

来自分类Dev

如何在React函数组件中使用数组状态?

来自分类Dev

React:如何在功能组件中强制状态更新?

来自分类Dev

如何在提交时管理React Button组件中的状态

来自分类Dev

如何在组件之间传递React Hook模式状态?

来自分类Dev

如何在 React 组件的状态下拼接数组

来自分类Dev

如何在reactjs和reflow中从其子组件设置容器组件的状态?

来自分类Dev

React JS在功能组件中设置状态

来自分类Dev

在 React 中的特定组件上设置状态

来自分类Dev

如何在React中将状态设置为对象数组

来自分类Dev

在React中,如何在Provider的值更改后设置状态?

来自分类Dev

如何在 React-native 中使用 Picker 设置状态?

来自分类Dev

如何在渲染中为React组件设置动画?

来自分类Dev

如何在React子组件中设置事件处理程序

来自分类Dev

如何在React组件构造函数中设置setInterval?

来自分类Dev

如何在React中的组件上设置条件属性

来自分类Dev

如何在React中设置嵌套组件的样式?

来自分类Dev

如何在React中设置子组件的处理程序?

来自分类Dev

如何在 React Material UI 的 AppBar 组件中设置容器?

来自分类Dev

如何设置子组件的子组件的父组件状态

来自分类Dev

更改视频 react-native-video 组件中的状态/道具

来自分类Dev

Redux包装的组件如何设置状态?

Related 相关文章

  1. 1

    如何在React的视频端设置组件的状态?

  2. 2

    如何在React中轻松设置兄弟组件的状态?

  3. 3

    如何在React中从另一个组件设置一个组件的状态

  4. 4

    如何在React中设置对象状态

  5. 5

    如何在父级的子级组件中设置状态?

  6. 6

    从组件外部设置React组件状态

  7. 7

    从组件外部设置React组件状态

  8. 8

    如何在Typescript中编写React无状态功能组件?

  9. 9

    如何在React函数组件中使用数组状态?

  10. 10

    React:如何在功能组件中强制状态更新?

  11. 11

    如何在提交时管理React Button组件中的状态

  12. 12

    如何在组件之间传递React Hook模式状态?

  13. 13

    如何在 React 组件的状态下拼接数组

  14. 14

    如何在reactjs和reflow中从其子组件设置容器组件的状态?

  15. 15

    React JS在功能组件中设置状态

  16. 16

    在 React 中的特定组件上设置状态

  17. 17

    如何在React中将状态设置为对象数组

  18. 18

    在React中,如何在Provider的值更改后设置状态?

  19. 19

    如何在 React-native 中使用 Picker 设置状态?

  20. 20

    如何在渲染中为React组件设置动画?

  21. 21

    如何在React子组件中设置事件处理程序

  22. 22

    如何在React组件构造函数中设置setInterval?

  23. 23

    如何在React中的组件上设置条件属性

  24. 24

    如何在React中设置嵌套组件的样式?

  25. 25

    如何在React中设置子组件的处理程序?

  26. 26

    如何在 React Material UI 的 AppBar 组件中设置容器?

  27. 27

    如何设置子组件的子组件的父组件状态

  28. 28

    更改视频 react-native-video 组件中的状态/道具

  29. 29

    Redux包装的组件如何设置状态?

热门标签

归档