2018-12-21 umi dva react框架中,集成antd design upload出现的问题

在react全家桶 umi框架中,集成antd design 中的upload组件,出现一个问题:
在IOS浏览器中需要双击才能打开图片等。问题和github上的这个问题差不多:

https://github.com/ant-design/ant-design/issues/10854

具体问题的原因可以查看上面链接的最后一个回复。
直接给解决办法:
把upload下的所有组件即:
在uploadButton上全部添加className=needsclick

import cls from "classnames";

    render() {
        const { previewVisible, previewImage, fileList } = this.state;
        const { token } = this.props;
        const data = {
            token: token,
        };
        const uploadButton = (
            <div className="needsclick">
                <i  className={cls(`iconfont needsclick icon-jiahao1`, styles.uploadIcon)}></i>
                <div  className={cls(`needsclick`, styles['ant-upload-text'])}>上传图片</div>
            </div>
        );
        return (
            <div className={cls(`clearfix`, styles.uploadWrapper)}>
                <Upload
                    ref={this.upload}
                    action={config.qiniu}
                    listType="picture-card"
                    fileList={fileList}
                    onPreview={this.handlePreview}
                    onChange={this.handleChange}
                    data={data}
                    name="file"
                >
                    {fileList.length >= 6 ? null : uploadButton}
                </Upload>
                <Modal visible={previewVisible} footer={null} onCancel={this.handleCancel}>
                    <img alt="example" style={{ width: '100%' }} src={previewImage}/>
                </Modal>
                
            </div>
        );
    }
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

友情链接更多精彩内容