Контекст реагирования - «это» не определено

Question

Я использую React Context для управления глобальным состоянием.

Итак, я определил свой Context с его провайдером и его потребителем.

У меня есть мой видеоплеер-контекст. js

import React from "react";
import { createContext } from 'react';

// set the defaults
const VideoContext = React.createContext({
  videoPlaying: false,
  setPlayingVideo: () => {}
});

export default VideoContext;

В моем _app. js у меня есть:

import App from 'next/app'
import { PageTransition } from 'next-page-transitions'
import VideoContext from '../components/videoplaying-context'

class MyApp extends App {
  setPlayingVideo = videoPlaying => {
    this.setState({ videoPlaying });
  };

  state = {
    videoPlaying: false,
    setPlayingVideo: this.setPlayingVideo
  }
  render() {
    console.log('new _app.js defalt page');
    const { Component, pageProps, router, state } = this.props
    return (
      <React.Fragment>
        <VideoContext.Provider value={this.state}>
          <PageTransition timeout={300} classNames="page-transition">
            <Component {...pageProps} key={router.route} />
          </PageTransition>
        </VideoContext.Provider>
      </React.Fragment>
    )
  }
}

export default MyApp

, а затем в одном из моих файлов я положил Потребитель:

import Layout from "../components/Layout";
import ReactPlayer from 'react-player
import VideoContext from '../components/videoplaying-context'

class Video extends React.Component {
  constructor(props) {
    super(props);
    this.triggerVideo = this.triggerVideo.bind(this);
  }
  triggerVideo(event) {
    console.log("click");
    /* doing other stuff here... */
  }
  render() {
    return (
      <VideoContext.Consumer>
        {context => (
          <Layout>
            <h1>Videos</h1>
            <div>
              <div className="group" id="process-video">
                <div
                  className="poster-image"
                  onClick={() => {
                    this.triggerVideo.bind(this);
                    context.setPlayingVideo(true);
                  }}
                />
                <ReactPlayer
                  url="https://vimeo.com/169599296"
                  width="640px"
                  height="640px"
                  config={{
                    vimeo: {
                      playerOptions: {
                        thumbnail_url: "http://placehold.it/640x640.jpg",
                        thumbnail_width: 640,
                        thumbnail_height: 640
                      }
                    }
                  }}
                />
              </div>
            </div>
            <style jsx global>{`
              .group {
                position: relative;
                height: 0;
                overflow: hidden;
                height: 640px;
                width: 640px;
              }

              .poster-image {
                background: url("http://placehold.it/640x640.jpg") center center;
                background-size: cover;
                bottom: 0;
                left: 0;
                opacity: 1;
                position: absolute;
                right: 0;
                top: 0;
                z-index: 10;
                height: 640px;
                width: 640px;
                transition: all 0.4s ease-in;
              }

              .poster-image + div {
                position: absolute;
                top: 0;
                left: 0;
                width: 640px;
                height: 640px;
              }

              .poster-image.video--fadeout {
                opacity: 0;
              }
            `}</style>
          </Layout>
        )}
      </VideoContext.Consumer>
    );
  }
}

export default Video;

Итак, функция context.setPlayingVideo (true) работает нормально, и она правильно устанавливает глобальное состояние videoPlaying в true, но после введения контекста this.triggerVideo.bind (this); больше не работает, потому что «это» не определено.

Я пытался удалить его и другие вещи, но я действительно застрял и не знаю, как это исправить.

Спасибо всем!

Answer 1

В этой строке вы не вызываете метод triggerVideo

onClick={() => { this.triggerVideo.bind(this); context.setPlayingVideo(true); }}

Измените на:

onClick={() => { this.triggerVideo(); context.setPlayingVideo(true); }}

или на:

onClick={() => { this.triggerVideo.bind(this)(); context.setPlayingVideo(true); }}