React Player Controls - HTML5 视频事件处理程序无法识别视频对象

Question

我是 React 框架的新手，所以我还在学习 JSX 语法和模式。

我正在尝试将自定义视频控件 UI 挂接到 HTML5 视频元素中，但无济于事。

我可以通过简单的 onClick 功能获得单独的 PLAY 和 PAUSE 按钮来控制视频，但是当我将 PLAY/PAUSE 作为切换元素与组件组合时，我无法弄清楚如何组合 PLAY/PAUSE使用我的 handlePlay()/handlePause() 函数的图标切换事件。

我确定这是我缺少的新手步骤，但我几乎被困在这里......任何反馈将不胜感激。

*编辑：在“PlaybackControls”中添加了这一行（ onClick={isPlaying ? console.log('PLAYING!') : console.log('PAUSED!')} ）

console.log() 打印 'PLAYNING!'和“暂停！” onClick 事件，正如预期的那样……但是如果我用对“handlePlay()”和“handlePause()”函数的调用替换 console.log()s……没有任何反应。

我错过了什么？

下面列出了我的代码示例：

import React, { Component } from 'react';

import { PlaybackControls, PlayButton, PauseButton, FormattedTime, 
TimeMarker, ProgressBar } from 'react-player-controls';

import customControls from './customControls.scss';

export default class Video01 extends Component {
  constructor(props) {
    super(props);

    this.state = {
      isPlayable: true,
      isPlaying: false,
      showPrevious: false,
      hasPrevious: false,
      showNext: false,
      hasNext: false
    }


    this.handlePlay = this.handlePlay.bind(this)
    this.handlePause = this.handlePause.bind(this)
}

  componentDidMount() {

  }

  componentWillMount() {

  }

/**********************************************************************\
    Video Playback Controls
\**********************************************************************/

    handlePlay () {
      if (this.props.isPlayable) {
        this.props.onPlaybackChange(true)
        this.refs.video01Ref.play()
      }
    }

    handlePause () {
      this.props.onPlaybackChange(false)
      this.refs.video01Ref.pause()
    }

  render() {

    return (
      <div>

      <div className={styles.container} data-tid="container">

        <div className={styles.videoContainer} data-tid="videoContainer">

        <video ref="video01Ref" src="./video/myVideo.webm" type="video/webm" />

        </div>

        </div>

        <div className={customControls.ControlsWrapper}>

          <PlaybackControls className={customControls.PlayButton, customControls.PauseButton}
            isPlayable={this.state.isPlayable}
            isPlaying={this.state.isPlaying}
            showPrevious={false}
            hasPrevious={false}
            showNext={false}
            hasNext={false}
            onPlaybackChange={isPlaying => this.setState(Object.assign({}, this.state, { isPlaying: isPlaying }))}
onClick={isPlaying ? console.log('PLAYING!') : console.log('PAUSED!')}

              />

              <ProgressBar className={customControls.ProgressBar} />

              <TimeMarker className={customControls.TimeMarker} />

            </div>

            </div>
        );
      }
    }

Answer 1

我取得了一些进展，所以我决定回答我自己的问题，希望能从一些优秀的 Samaritan React/JSX 大师那里得到一些反馈。

我仍在熟悉 React/JSX 语法，但我真的很喜欢我目前所学的内容。模块化方法肯定更有效，因为它与内存/优化有关......并且它更容易查明错误和错误。话虽如此......这是我迄今为止发现的：

• 我知道如何通过外部组件（自定义播放器控件）播放/暂停我的视频。
• 我了解到，使用单个（嵌套）组件来设计我的布局是明智的，而不是一大堆混乱（即 和 是组合成一个类的单个组件，然后将其插入到我的组件中，即插入我的)

我仍然想弄清楚的是如何在组件之间传递道具。状态和属性的概念对我来说很有意义，但是我对如何正确执行工作流缺乏一些基本的了解。我确信它与 React 生命周期有关，但这是完全独立的对话。

现在，我的更新代码示例发布在下面。我能够播放/暂停带有外部组件（自定义播放器控件）的 HTML5 视频，但是如何将 props 元素传递回自定义控件组件？例如，如何将默认的 props（即“currentTime”、“duration”、“seeking”、“ended” => 映射到“currentTime”、“totalTime”、“onSeek”等）？

请原谅我冗长的咆哮，但任何反馈都将不胜感激。这是我更新的代码：

import React, { Component } from 'react';
import PropTypes from 'prop-types';

import { PlaybackControls, PlayButton, PauseButton, FormattedTime, TimeMarker, TimeMarkerType, ProgressBar } from 'react-player-controls';

import customControls from './customControls.scss';

export default class CustomControls01 extends Component {
  constructor(props) {
    super(props);

    this.state = {
      isEnabled: true,
      isPlayable: true,
      isPlaying: false,
      showPrevious: false,
      hasPrevious: false,
      showNext: false,
      hasNext: false,
      totalTime: 28,
      currentTime: 0,
      bufferedTime: 0,
      isSeekable: true,
      lastSeekStart: 0,
      lastSeekEnd: 0,
      markerSeparator: ' / ',
      firstMarkerType: TimeMarkerType.ELAPSED,
      secondMarkerType: TimeMarkerType.DURATION,
    }

    this.handlePlay = this.handlePlay.bind(this)
    this.handlePause = this.handlePause.bind(this)
}

    componentDidMount() {

    }

    componentWillUnmount() {

    }

/**********************************************************************\
  Video Playback Controls
\**********************************************************************/

  handlePlay() {
    vid01.play()
  }

  handlePause() {
    vid01.pause()
  }

  render() {

    const { isPlayable, isPlaying, showPrevious, showNext, hasPrevious, hasNext, totalTime, currentTime, markerSeparator, firstMarkerType, secondMarkerType, bufferedTime, isSeekable, lastSeekStart, lastSeekEnd, lastIntent, className, extraClasses, childClasses, style, childrenStyles, onPlaybackChange } = this.props;

    const TimeMarkerType = {
      ELAPSED: 'ELAPSED',
      REMAINING: 'REMAINING',
      REMAINING_NEGATIVE: 'REMAINING_NEGATIVE',
      DURATION: 'DURATION',
    }

    return (

        <div className={customControls.ControlsWrapper}>

          <PlaybackControls className={customControls.PlayButton, customControls.PauseButton}
            isPlayable={this.state.isPlayable}
            isPlaying={this.state.isPlaying}
            showPrevious={false}
            hasPrevious={false}
            showNext={false}
            hasNext={false}
            onPlaybackChange={isPlaying => this.setState({ ...this.state, isPlaying }, isPlaying ? (vid01) => this.handlePlay(isPlaying, isPlayable) : (vid01) => this.handlePause(isPlaying, isPlayable))}
          />

          <ProgressBar className={customControls.ProgressBar}
            totalTime={this.state.totalTime}
            currentTime={this.state.currentTime}
            bufferedTime={this.state.bufferedTime}
            isSeekable={this.state.isSeekable}
            onSeek={time => this.setState((vid01) => ({ currentTime: time }))}
            onSeekStart={time => this.setState((vid01) => ({ lastSeekStart: time }))}
            onSeekEnd={time => this.setState((vid01) => ({ lastSeekEnd: time }))}
            onIntent={time => this.setState((vid01) => ({ lastIntent: time }))}
          />

          <TimeMarker className={customControls.TimeMarker}
            totalTime={this.state.totalTime}
            currentTime={this.state.currentTime}
            markerSeparator={this.state.markerSeparator}
            firstMarkerType={this.state.firstMarkerType}
            secondMarkerType={this.state.secondMarkerType}
          />

        </div>

    );
  }
}

CustomControls01.propTypes = {
};