react 封装图片+pdf翻页浏览插件

  利用antd的Modal组件实现弹窗功能，控制图片和pdf显隐，

<Modal
    visible={visible}
    onCancel={this.onCancel}
    onOk={this.onOk}
    width="1026"
    //style={{width:1026,height:900}}
    footer={null}
>
    <div>
        {this.state.data ? this.state.data : data}
        <div id="slide-arrow-box"
             onMouseOver={this.show}
             onMouseOut={this.unshow}>
            <div
                className="slide-arrow slide-arrow-left"
            >
                <Icon type="left-circle"
                      style={{color:'#666666',display:this.state.show}}
                      onClick={this.pressLeft}
                />
            </div>
            <div
                    className="slide-arrow slide-arrow-right"
            >
                <Icon type="right-circle"
                      style={{color:'#666666',display:this.state.show}}
                      onClick={this.pressRight}
                      
                />
            </div>
        </div>
    </div>
</Modal>
通过组件的state保存变量，如果使用redux框架的可以存到框架的state中，这样可以实现对页面调用；

const visible = this.state.visible;

const path = this.state.fileData.path;
const filename = this.state.fileData.filename;
const imgData = <img id="press" src={path[0]} style={{width:980,height:950}}/>;
const iframData = <iframe className="scrolling" scrolling="no" frameBorder="0" id="press" src={path[0]} style={{width:980,height:950}}/>
const data = filename[0] && (filename[0].endsWith("pdf") || filename[0].endsWith("PDF")) ? iframData : imgData;

下面两个方法用来控制翻页箭头的显隐，上面的Icon组件就是两个箭头（需要手动写css控制一下位置）；

show = () =>{
    this.setState(
        {
            show : 'block'
        }
    )
}

unshow = () => {
    this.setState(
        {
            show : 'none'
        }
    )
}

绑定鼠标事件：

下面的方法实现翻页操作：

pressRight = () => {
    const _state = this.state;
    const path = _state.fileData.path;
    const filename = _state.fileData.filename;
    _state.index ++;

    if(_state.index >= path.length){

        _state.index = 0;
    }
    let index = _state.index;
    const data = [];
    if(filename[index].endsWith("pdf") || filename[index].endsWith("PDF")){
        data.push(<iframe id="press" src={path[index]} style={{width:980,height:950}}/>)
    }else{
        data.push(<img id="press" src={path[index]} style={{width:980,height:950}}/>)
    }
    this.setState({data : data})
}
向左翻页方法类似。
绑定键盘事件，使用左右键控制翻页：

componentDidMount(){
    let shelf = this;
    window.addEventListener('keyup',function (e) {
        switch (e.keyCode){
            case 37:
                shelf.pressLeft();
                break;
            case 39:
                shelf.pressRight();
                break;
            default:
                break;
        }
    })
}