ttk-app-core/src/apps/app-demo/modal/modal-demo/app.js

@ttk/recat enterprise develop framework

import React, { useEffect, useCallback, useState } from 'react'
import { Button, Modal } from 'antd'
import "./style.less"

export default React.memo(Page)
function Page(props) {

  const [modalText, setModalText] = useState('')
  const [showModal, setShowModal] = useState(false)
  const [confirmLoading, setConfirmLoading] = useState(false)

  const onOk = useCallback(() => {
    setConfirmLoading(true)
    console.log('click ok')
    setTimeout(() => {
      // 异步关闭
      setShowModal(false)
      setConfirmLoading(false)
    }, 2000)
  })

  const onCancel = useCallback(() => {
    console.log('click cancel')
    setShowModal(false)
  })

  const onAfterClose = useCallback(() => {
    console.log('doing after close')
  })

  // method方式弹出modal
  const onClickMethod = useCallback((value) => {
    Modal[value]({
      title: `${value} modal`,
      maskClosable: true,
      onOk: () => {
        console.log('click ok')
      },
      onCancel: () => {
        console.log('click cancel')
      },
    })
  })

  // 模板方式弹出modal
  const onClickTemplate = useCallback((value) => {
    setModalText(value)
    setShowModal(true)
  })

  return (
    <div className="modal-demo" style={{padding: '20px'}}>
      <div>
        <label>method方式：</label>
        <Button onClick={() => onClickMethod('info')}>info</Button>
        <Button onClick={() => onClickMethod('success')} type="primary">success</Button>
        <Button onClick={() => onClickMethod('error')} type="danger">error</Button>
        <Button onClick={() => onClickMethod('warning')} type="primary">warning</Button>
        <Button onClick={() => onClickMethod('confirm')} type="primary">confirm</Button>
      </div>
      <div>
        <label>模板方式：</label>
        <Button onClick={() => onClickTemplate('info')}>info</Button>
        <Button onClick={() => onClickTemplate('success')} type="primary">success</Button>
        <Button onClick={() => onClickTemplate('error')} type="danger">error</Button>
        <Button onClick={() => onClickTemplate('warning')} type="primary">warning</Button>
        <Button onClick={() => onClickTemplate('confirm')} type="primary">confirm</Button>
        <Modal
          title={'title: ' + modalText}
          visible={showModal}
          onOk={onOk}
          onCancel={onCancel}
          afterClose={onAfterClose}
          confirmLoading={confirmLoading}
          okText="确认"
          centered
          cancelText="取消"
        >
          <p>你点击了 {modalText}</p>
        </Modal>
      </div>
    </div>
  )
}