Reactjs 单击react？？？（instagram克隆编码）中的图像如何查看模式 从“antd”导入{Modal}； 函数配置文件（）{ const[visible，setVisible]=useState（false）； 返回( {myposts.map（（mypost，index）=>{ 返回( {可见&&(

一些内容

一些内容

一些内容

)} ); })} )}

---

这是我的代码摘要。我想当我点击图片的时候，它应该是模态的。但是，它什么都不起作用。我不知道哪一部分错了。（模态部分现在有一些奇怪的内容。我会在看到模态后更改此部分。）

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

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>
            )}
          </>
        );
      })}
    </>
   )}
 

从“antd”导入{Modal}；
函数配置文件（）{
const[visible，setVisible]=useState（false）；
const[selectedImgSrc，setSelectedImgSrc]=useState（“”）；
常量imgClick=（imgSrc）=>{
setSelectedImgSrc（imgSrc）；
setVisible（真）；
};
返回(
{myposts.map（（mypost，index）=>{
返回(
);
})}
setVisible（false）}
onCancel={（）=>setVisible（false）}
>
);
}

问题似乎出在您的代码中

一些内容

一些内容

一些内容

非常感谢您！！我完全按照你的建议解决了我的问题。

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>
    </>
  );
}