美文网首页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

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