javascript - 如何将自定义回调传递给显示的自定义模态组件？

Question

我有一个自定义模态组件，它依赖于此处显示的方法（https://sandstorm.de/de/blog/post/reusable-modal-with-react-hooks-and-portals.html）呈现AntDModal并扩展为 3属性，当引用useModal钩子时：

const Modal = React.memo(({ visible, handleOk, handleCancel, handleDiscard }: Props) => {
    const domEl = document.getElementById('modal-root')

    if (!domEl) return null

    return ReactDOM.createPortal(/* .... */)
        
})

这个想法是，我正在使用钩子并引用要调用的操作，当用户单击确定时，丢弃更改或取消：

export const useModal = (props) => {
    const [isVisible, setIsVisible] = useState(false)
    const show = () => setIsVisible(true)

    const hide = () => setIsVisible(false)

    const RenderModal = () => (
        <>
            { isVisible && <Modal
                visible={isVisible}
                handleCancel={props.handleCancel}
                handleDiscard={props.handleDiscard}
                handleOk={props.handleOk}
            />}
        </>
    )

    return {
        show,
        hide,
        RenderModal,
    }
}

然后将像这样使用它：

const { show, hide, RenderModal } = useModal({
    handleCancel: () => {
        hide()
    },
    handleOk: () => {
        state.dirtyEmployeeDetails.forEach(details => {
            details.saveFunc()
        })
        hide()
    },
    handleDiscard: () => {
        state.dirtyEmployeeDetails.forEach(details => {
            details.resetFunc()
        })
        hide()
    }
})

这样做的问题是，我无法找到一种方法来使这个模式符合要求，我可以在调用时传入额外的回调show。

理想情况下，我想在这样的事件处理程序中使用它：

const handleTabClick = (key: string, event: React.KeyboardEvent | React.MouseEvent) => { //检查脏表单数据是否可见，要求用户在离开当前区域前采取行动 const isDirty = state.dirtyEmployeeDetails.size > 0 if (isDirty) {

    show( /* pass in callbacks to be called when ok, discard, cancel is clicked in addition to the one already defined or replacing them altogether*/)
}
else {
    //default action
    setActiveTabKey(key)
}

目标是在用户单击取消时调用带有可选回调的节目，例如event.preventDefault(). 如果用户点击放弃，我们重置保存在全局状态的表单，然后继续，模拟 OK。

我找不到在 React 中执行此操作的方法，并且正在寻找解决此问题的可行方法。

标签： javascriptreactjstypescript