当 iframe 组件移动时，iframe 内锚点上的附加事件确实在轮播中起作用。[ReactJS]

Question

我在 ReactJS 中的轮播中显示 iframe（反应流畅）。我使用 jquery 在 iframe 内的锚点上添加了一个 on click 事件监听器。 iframe 加载时附加事件。单击在正常情况下可以正常工作，但是当我在旋转木马中从右向左移动组件时，单击停止工作。

这是我的代码：

class MyFrame extends React.Component{

  constructor(props) {
   super(props);
  }

  componentDidMount() {
    this.props.hpStartedPlayingEvent();
  }
  myFrameOnLoadHandler() {
    let self = this;
    $(this.myIframe).contents().find("a").on('click', function(){
        let url = this.getAttribute("href");
        self.props.hpHandleLinkInsideMyFrameClicked(url);

    });
    $(this.myIframe).contents().find("img").bind('dragstart', function(){
        return false;
    });
}
  render() {
   return (
      <div className="myFrame" style={{ width: this.props.data.width }}>
         <iframe  onLoad = {this.myFrameOnLoadHandler.bind(this)} src={this.props.data.myFrame.URL} className="myFrameImg" ref={(ref) => {this.myIframe = ref;} }  frameBorder="0" scrolling="no" id="myFrameIdDefault"/>
     </div>
   );
  }
}

我检查过它看起来 content() 在后一种情况下返回空。我该怎么办？谢谢。

Answer 1

我正在使用 translate3d 移动轮播。将 translate3d 更改为简单翻译时有效。

当 iframe 组件移动时，iframe 内锚点上的附加事件确实在轮播中起作用。[ReactJS]

Attached Event on anchor inside iframe does work in carousel when the iframe component are moved.[ReactJS]

iframe

reactjs

react-slick