美文网首页antd
2018-12-21 umi dva react框架中,集成an

2018-12-21 umi dva react框架中,集成an

作者: 大唐帝国 | 来源:发表于2018-12-21 10:20 被阅读22次

在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>
        );
    }

相关文章

  • 2018-12-21 umi dva react框架中,集成an

    在react全家桶 umi框架中,集成antd design 中的upload组件,出现一个问题:在IOS浏览器中...

  • [React+dva+umi+antd]Layout里的标题动态

    使用 [React+dva+umi+antd] 技术栈的时候, dva和 umi 已经给我们带来很多便捷.不用绑定...

  • react+umi+dva框架

    前言 在antd-pro基础上修改,根据公司项目内容搭建新的框架,用于项目初期快速上手,避免重复造轮子。 必备技能...

  • 前端可视化拖拽方案

    技术栈:react+dva+less+umi+antd+node+ sortable umi:组件库设计考虑的一个...

  • dva 在umi中的使用

    在react项目中,使用react+umi+dva+antd这一阿里系列技术栈的人越来越多,本文主要讲在umi中使...

  • dva源码随记

    前言 在学习antd的UI框架时,了解到了dva这个轻量级的应用框架,集成了react,redux,redux-s...

  • DvaJS

    本文源码地址https://github.com/Colinlyj210/umi-dva React通信 组件会发...

  • dva 是什么

    dva 是什么 dva 是 React 应用框架,将React-Router + Redux + Redux-sa...

  • antd+umijs+dva+axios

    参考网址 Umi + Dva + Antd的React项目实践 umi,中文可发音为乌米,是一个可插拔的企业级 r...

  • umi脚手架创建项目踩坑

    今天要新建一个react 项目完成一个demo 这回我们用dva + umi 来写 所以我们需要用umi.js 来...

网友评论

    本文标题:2018-12-21 umi dva react框架中,集成an

    本文链接:https://www.haomeiwen.com/subject/estmkqtx.html