基于antd封装Modal(2)

2,789 阅读1分钟

上篇文章介绍如何把visible抽离出来,利用的是一个按钮的点击事件调用showModal和hideModal。 这次将升级一下,不借助按钮,直接使用ref调用组件内的事件,那么如何完成呢。

import React, { useState, forwardRef, useImperativeHandle } from 'react'
function Dialog(props, ref) {
  const { onSuccess, renderBtn = <span></span>, item = {} } = props
  const [visible, setVisible] = useState(false)

  // modal的显示与隐藏
  const showModal = () => {
    setVisible(true)
  }
  const hideModal = () => {
    setVisible(false)
  }
  
  useImperativeHandle(ref, () => ({
    showModelRef: showModal,
    hideModelRef: hideModal
  }))

  const handleClose = () => {
    hideModal()
  }

  return (
    <span>
      {React.cloneElement(renderBtn, { ...renderBtn.props, onClick: showModal })}
      <Modal
        width={670}
        footer={null}
        visible={visible}
        centered={true}
        maskClosable={false}
        onCancel={handleClose}
        destroyOnClose={true}
      >
      {
       // ....
      }
      </Modal>
    </span>
  )
}

export default forwardRef(Dialog)

首先引入 forwardRef, useImperativeHandle 这两个东西,不懂得google一下

使用:

import React, { useRef } from 'react'
import Dialog from './dialog.js'

export default function App () {
    const dialogRef = useRef()

    // dialogRef.current.showModelRef()  用ref的方法直接去调用showModelRef()弹窗就可以展示
    console.log('dialogRef---', dialogRef)
    return (
        <Dialog
            ref={dialogRef}
        />
    )
}

用ref的current下方法直接去调用showModelRef()弹窗就可以展示 这里呢使用到的是useRef去调用,不会用百度。 哈哈哈哈 就介绍到这里了。。。 码字不易 给阿泽点个赞吧!!!