如何使用ReactJS監聽iframe keydown事件

Question

我想在reactjs中監聽iframe的keydown事件。在我的iframe中嵌入了視頻。現在，當視頻播放時，我想處理鍵盤事件。任何人都可以幫助我如何聽鍵盤事件。這是我的代碼

class VideoDetail extends Component { 

videoLoad(e) { 
    console.log('videoLoaded'); 
    this.videoFrame.addEventListener('keydown',this.onVideoDown); 
} 

onVideoDown(e) { 
    console.log('key pressed'); // This is not invoking 
} 

componentDidMount() { 
    console.log(this.videoFrame); 
} 
render() { 
    const video = this.props.video; 
    if (!video) { 
     return <div>Loading...</div>; 
    } 

    const videoId = video.id.videoId; 
    const url = `https://www.youtube.com/embed/${videoId}`; 
    return (
     <div className="video-detail col-md-8"> 
      <div className="embed-responsive embed-responsive-16by9"> 
       <iframe ref={(iframe) => { this.videoFrame = iframe; console.log(iframe); }} className="embed-responsive-item" src={url} onLoad={(e) => this.videoLoad(e)}></iframe> 
      </div> 
      <div className="details"> 
       <div>{video.snippet.title}</div> 
       <div>{video.snippet.description}</div> 
      </div> 
     </div> 
    ); 
} 

} 

Answer 1

您可以iframe.contentWindow.document趕上了iframe​​事件如下使用或者e.target或this.videoFrame與ref。

修改後的代碼

videoLoad(e) { 
    console.log('videoLoaded'); 
    var iframe = e.target; // it is equal to "this.videoFrame" and so, you can avoid using "ref" 
    //this.videoFrame.addEventListener('keydown',this.onVideoDown); 
    iframe.contentWindow.document.addEventListener('keydown', this.onVideoDown); 
}