html - 使用 React 组件状态更改 currentTime

Question

这是一个 link to the sandbox .我正在寻找操纵 <video> 的最佳方法元素的当前时间。在我的沙箱中，我已经能够通过让按钮调用函数来做到这一点 seek()这改变了 video 的状态, 对 document.getElementById('video-player') 的引用，见下文。

export default class VideoPlayer extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      source: props.source,
      timestamp: props.timestamp
    };
  }

  componentDidMount() {
    this.setState({ video: document.getElementById('video-player') })
  }

  componentDidUpdate(prevProps) {
    if (this.props !== prevProps) {
      this.setState(
        { timestamp: this.props.timestamp }, 
        () => { this.seek() }
      );
    }
  }

  seek = () => {
    console.log(this.state.timestamp)
    //works
    this.state.video.currentTime = 1;
    //doesn't work
    //this.state.video.currentTime = this.state.timestamp;
  }

  render() {
    return (
      <div>
        <video 
          id='video-player'
          height='200px'
          src={this.state.source} 
          type='video/mp4'
          controls>
        </video>
        {/* I don't want this button. I want skip from the outside */}
        <button onClick={this.seek}>Skip Inside Component</button>
      </div>
    );
  }
}

我无法弄清楚的是，我只能设法更改组件内的 currentTime 因为无论出于何种原因，我都无法分配 this.state.timestamp到我的 <video> 的当前时间引用(this.state.video.currentTime)。

最终组件应该收到 props.timestamp , 由 Redux 提供，请调用 seek()里面<VideoPlayer />每当 Redux 的状态发生变化时，将视频的 currentTime 设置为 this.state.timestamp .

如果你们需要更多详细信息，请告诉我。提前致谢!

编辑:以上内容已得到解答，但我仍然遇到问题。我共享并刚刚修复的沙箱在我的 rails project 中仍然不起作用尽管。我有一种感觉它不会。当 App.js 中的三个按钮之一时单击，Redux 中的状态发生变化，并被 <VideoPlayer> 成功接收.我在 seek() 中的 console.log 确认了这一点它将相应按钮的值返回到控制台。但是，视频的 currentTime 仍然没有改变。这里有什么想法吗？

Answer 1

在 mapStateToProps 中，您的state 是 timestamp，而不是 state.timestampReducer.

这应该有效:

const mapStateToProps = (state) => {
  return {
    timestamp: state
  }
};