上篇文章介绍如何把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去调用,不会用百度。 哈哈哈哈 就介绍到这里了。。。 码字不易 给阿泽点个赞吧!!!