antd Popconfirm onKeyDown事件如何实现

Question

I need to fire Popconfirm message not only when clicked on the Cancel button, but when pressed on Esc button on keyboard as well. Antd provides out of the box solution for onMouseEnter, onMouseLeave, onFocus, onClick events.https://ant.design/components/popconfirm/

How to pass onKeyDown event to a child node of the Popconfirm component?

<Popconfirm
   title={message}
   placement='top'
   onConfirm={handleConfirm}
>
    <Button>{'Cancel'}</Button>
</Popconfirm>

Answer 1

Popconfirm is a child of the Tooltip component ( https://ant.design/components/tooltip/#API ) which has the visible prop. With that, you can handle the visibility state outside of your Popconfirm, for example in a wrapping component, which also listenes to the key event.

Something like that should work:

import React, {useState} from "react";
import {Popconfirm} from "antd";

const PopconfirmWrapper = ({children, message, onConfirm}) => {
    const [visible, setVisible] = useState(false);
    return <Popconfirm
        onKeyDown={() => /* maybe check the key first? */ setVisible(true)}
        title={message}
        placement='top'
        onConfirm={onConfirm}
        onVisibleChange={() => setVisible(!visible)}>
        {children}
    </Popconfirm>
}

export default PopconfirmWrapper;