码迷,mamicode.com
首页 > 其他好文 > 详细

解决antd design的Modal组件弹出卡顿的问题

时间:2020-01-14 13:33:01      阅读:400      评论:0      收藏:0      [点我收藏+]

标签:return   can   state   end   img   pre   hold   解决   change   

代码:

import React from ‘react‘
import ReactDOM from ‘react-dom‘
import Axios from "axios";
import copy from ‘copy-to-clipboard‘
import { Input, Button, Modal, message, Icon } from ‘antd‘
import ‘../static/css/input.css‘
import ‘../static/css/button.css‘
import ‘../static/css/modal.css‘
import ‘../static/css/message.css‘
import ‘../static/css/icon.css‘
import ‘../static/css/decrypt.css‘

const { TextArea } = Input;

export default class Decrypt extends React.Component {
    state = {
        link: ‘‘,
        secretKey: ‘‘,
        content: ‘‘
    }

    render() {
        return (
            <div id="decrypt-container" className=‘decrypt-container‘>
                <table className=‘decry-table‘>
                    <tbody>
                    <tr>
                        <td><Input placeholder="Please Input the Link" onChange={e => this.linkInputChangehandler(e)} /></td>
                        <td><Button type="primary" onClick={this.buttonClickHandler}>Confirm</Button></td>
                    </tr>
                    </tbody>
                </table>
            </div>
        )
    }

    linkInputChangehandler = e => {
        const link = e.target.value
        this.setState({ link })
    }

    buttonClickHandler = () => {
        Modal.confirm({
            title: ‘Resource extraction‘,
            icon: <Icon type="info-circle" />,
            content: <Input placeholder="Please Input the Secret Key" ref={input => this.contentSecretKeyInput = input} />,
            okText: ‘Confirm‘,
            cancelText: ‘Cannel‘,
            onOk: this.confirm
        })
    }


    confirm = () => {
        const secretKey = this.contentSecretKeyInput.state.value
        let { link } = this.state
        link = link.substring(link.lastIndexOf(‘/‘) + 1)
        // console.log(`secretKey=${secretKey}, link=${link}`)

        Axios.get(‘/api/encryption?id=‘ + link + ‘&key=‘ + secretKey).then(res => {
            if (res.data.code === 0) {
                let content = res.data.data.content
                this.setState({ content })
                //message.success(‘Successful‘);
                ReactDOM.render(
                    <div>
                        <span className=‘content-info‘>The content you extract is:</span>
                        <TextArea rows={8} value={this.state.content} />
                        <Button className=‘copy-button‘ type="primary" onClick={this.buttonCopyHandler}>Copy</Button>
                    </div>,
                    document.getElementById(‘decrypt-container‘),
                );
            } else {
                // error message info
                if (res.data.data && res.data.data.incr)
                    message.error(`${res.data.message}, only ${res.data.data.incr} input opportunities left`);
                else
                    message.error(res.data.message);
            }
        })
    }

    buttonCopyHandler = () => {
        // Get the value of the `value` attribute of the <Input> component
        copy(this.state.content)
    }

}

技术图片

 

解决方案1:

  将导入antd组件css样式的代码删除,改为;

import "antd/dist/antd.css"
// import ‘../static/css/input.css‘
// import ‘../static/css/button.css‘
// import ‘../static/css/modal.css‘
// import ‘../static/css/message.css‘
// import ‘../static/css/icon.css‘
import ‘../static/css/decrypt.css‘

  但是这样不能实现按需导入,加载了全部的 antd 组件的样式(gzipped 后一共大约 60kb)。

 

解决方案1:按需导入antd组件css样式

  参考 https://ant.design/docs/react/use-with-create-react-app-cn

解决antd design的Modal组件弹出卡顿的问题

标签:return   can   state   end   img   pre   hold   解决   change   

原文地址:https://www.cnblogs.com/xy-ouyang/p/12191354.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!