我如何通过单击反应中的图像来查看模态？（instagram 克隆编码）

Question

import { Modal } from "antd";

function Profile(){

const [visible, setVisible] = useState(false);

return(

  <>
    {myposts.map((mypost, index) => {
        return (
          <>
            <img
              key={index}
              className="item"
              onClick={() => {
                setVisible(true);
              }}
              src={`http://localhost:5000/uploads/${mypost.photo}`}
            />
            {visible && (
              <Modal
                title="Basic Modal"
                visible={visible}
                onOk={setVisible(false)}
                onCancel={setVisible(false)}
              >
                <p>Some contents...</p>
                <p>Some contents...</p>
                <p>Some contents...</p>
              </Modal>
            )}
          </>
        );
      })}
    </>
   )}

这是我的代码总结。我想当我点击图片时，它应该会变成模态。但是，它没有任何作用。我不知道哪一部分是错的。（模态部分现在有一些奇怪的内容，我会在看到模态后更改这部分。）

Answer 1

尝试将模态框放在 mypost 地图之外，也许这就是模态框不显示的原因。所选图像的 src 路径可能需要另一种状态。

import { Modal } from "antd";

function Profile() {
  const [visible, setVisible] = useState(false);
  const [selectedImgSrc, setSelectedImgSrc] = useState("");

  const imgClick = (imgSrc) => {
    setSelectedImgSrc(imgSrc);
    setVisible(true);
  };

  return (
    <>
      {myposts.map((mypost, index) => {
        return (
          <>
            <img
              key={index}
              className="item"
              onClick={() => {
                imgClick(`http://localhost:5000/uploads/${mypost.photo}`);
              }}
              src={`http://localhost:5000/uploads/${mypost.photo}`}
            />
          </>
        );
      })}

      <Modal
        title="Basic Modal"
        visible={visible}
        onOk={() => setVisible(false)}
        onCancel={() => setVisible(false)}
      >
        <img src={selectedImgSrc} />
      </Modal>
    </>
  );
}

Answer 2

看来问题出在您的代码中。

  <Modal
    title="Basic Modal"
    visible={visible}
    onOk={setVisible(false)}
    onCancel={setVisible(false)}
  >
    <p>Some contents...</p>
    <p>Some contents...</p>
    <p>Some contents...</p>
  </Modal>

onOk={setVisible(false)}
onCancel={setVisible(false)}

问题出在这些行上。当您单击图像时，它会打开您的模式，但是当模式被渲染时，这些行将可见状态设置为 false。因此模态框很快就会从 DOM 中删除。这就是为什么您在单击图片时看不到模态窗口的原因。

请试试这个。

onOk={() => setVisible(false)}
onCancel={() => setVisible(false)}

你应该为 onOk 和 onCancel 属性传递一个函数。

我如何通过单击反应中的图像来查看模态？（instagram 克隆编码）

How do I see modal by clicking image in react??(instagram clone coding)

simplemodal

reactjs

antd