基于antd封装Modal（1）

代码:

import React, { useState, useEffect } from 'react'
import { Row, Col, Input, Select, Button, message, Modal } from 'antd'
import './index.less'

export default function MyModal(props) {
    const { onSuccess, dispatch, renderBtn = <>null btn</>, item = {} } = props
    const [visible, setVisible] = useState(false)
    
    // modal的显示与隐藏
    const showModal = () => { setVisible(true) }
    const hideModal = () => { setVisible(false) }
    
    // 回调的使用
    const onSubmit = () => {
        isFunction(onSuccess) && onSuccess(...)
    }
    
    return (
        <div>
          {React.cloneElement(renderBtn, { ...renderBtn.props, onClick: showModal })}
          <Modal
            title='标题'
            visible={visible}
            onCancel={handleClose}
          >
            { // 这里可以写弹窗的内容 }
          </Modal>
        </div>
    )
}

import MyModal from './components/MyModal'

<MyModal
  {...props}
  item={item}
  renderBtn={<span style={{ cursor: 'pointer', color: '#5383FF' }}>编辑</span>}
  onSuccess={onSuccess} // 回调
/>

备注:

1.为了按钮能使用showModal使用React.cloneElement()

2.回调函数onSucess()可在提交表单的时候去使用