react antd实现双击弹出Card组件
时间: 2023-07-12 19:13:53 浏览: 93
可以通过在antd的Card组件上添加onDoubleClick事件来实现双击弹出Card组件,具体实现代码如下:
```jsx
import { Card } from 'antd';
import React, { useState } from 'react';
const DoubleClickCard = (props) => {
const [visible, setVisible] = useState(false);
const handleDoubleClick = () => {
setVisible(true);
};
const handleCancel = () => {
setVisible(false);
};
return (
<>
<Card onDoubleClick={handleDoubleClick} {...props} />
<Modal visible={visible} onCancel={handleCancel}>
{props.children}
</Modal>
</>
);
};
export default DoubleClickCard;
```
在这里,我们实现了一个名为DoubleClickCard的组件,它包装了antd的Card组件,并添加了双击事件。当用户双击该组件时,会弹出一个Modal组件,其中包含了Card组件的children。用户可以在Modal中查看Card组件的详细内容。