可以用按钮打开antd图片预览吗？答案

【问题标题】：Is it possible to open an antd image preview with a button?可以用按钮打开antd图片预览吗？
【发布时间】：2022-01-19 16:21:07
【问题描述】：

我想在 antd 中打开图像的预览而不点击图像缩略图本身（例如通过点击按钮）：

import React from 'react';
import {Image, Button} from 'antd';

const Foo: React.Fc<any> = (props) => {

const [isPreviewVisible,setPreviewVisible] = useState<boolean>(false);

return (
  <div>
       <Image 
        // something like this 
        // isPreviewVisible={isPreviewVisible} 
        src="some url"
       />
       <Button onClick={()=>setState(!isPreviewVisible)}>Click me!</Button>
  </div>
  );
};

我想实现它类似于上面的代码，但找不到任何方法。

编辑：我想控制/切换带有状态的预览的可见性。

【问题讨论】：

像一个工具提示？
不完全，但类似。我试图使用 antd 本身的图像组件已经存在的预览功能，但是以一种更“可控”的方式。在我的示例中，我想通过状态控制预览的可见性。

标签： javascript reactjs typescript antd

【解决方案1】：

你可以这样做：

function ImageDemo() {
  const [isPreviewVisible, setPreviewVisible] = useState(false);
  return (
    <>
      <Image
        width={200}
        preview={{
          visible: isPreviewVisible,
          onVisibleChange: (visible, prevVisible) => setPreviewVisible(visible),
        }}
        src="https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png"
      />
      <Button onClick={() => setPreviewVisible(!isPreviewVisible)}>
        Click me
      </Button>
    </>
  );
}

我还实现了一个例子here你可以看看：

【讨论】：